css表格表头表尾固定，表身滚动
表头表尾固定，表身滚动实现用了3个table标签
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>表头表尾固定，表身滚动</title>
<meta charset="utf-8" />
<style>
*{margin:0;padding:0;}
.container{border: 1px #ccc solid;width: 90%;margin: 100px auto;}
.form-table{width: 100%;margin: 0 auto;text-align: center;table-layout: fixed;}
.form-table th{border-right: 1px #ccc solid;border-bottom: 1px #ccc solid;background: #F3F3F3;}
.form-table td{border-bottom: 1px #ccc solid;border-right: 1px #ccc solid;}
.fixed-tfoot tr td{background: #F3F3F3;border-bottom: none;}
.fixed-thead,.fixed-tfoot{padding-right:17px;}
.fixed-thead tr th,.fixed-tfoot tr td{height: 50px;font-size: 16px;text-align: center;}
.scroll-box{width: 100%;height: 300px;overflow: auto;overflow-x:hidden;}
.scroll-box tr{width: 100%;height: 40px;line-height: 20px;}
.scroll-box tr td{padding: 5px;}
.scroll-box tr:nth-child(odd) td{background-color: #ECE9D8;}
.tip{margin: 0 auto;text-align: center;color: red;line-height: 150%;font-size: 14px;}
</style>
</head>
<body>
<!--container-->
<div class="container">
<!--【fixed-thead表头】-->
<table class="form-table fixed-thead" cellpadding="0" cellspacing="0">
<tr>
<th>序号</th>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
</table>
<!--【fixed-thead表头】-->
<!--【表身】-->
<div class="scroll-box">
<table class="form-table" cellpadding="0" cellspacing="0">
<tr>
<td>111111</td>
<td>张三张三张三张三</td>
<td>男男男男男</td>
<td>181818</td>
</tr>
<tr>
<td>111111</td>
<td>张三张三三张三张三</td>
<td>男男男男男</td>
<td>181818</td>
</tr>
<tr>
<td>111111</td>
<td>张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三</td>
<td>男男男男男</td>
<td>181818</td>
</tr>
<tr>
<td>111111</td>
<td>张三张三张三张三</td>
<td>男男男男男</td>
<td>181818</td>
</tr>
<tr>
<td>111111</td>
<td>张三张三张三张三</td>
<td>男男男男男</td>
<td>181818</td>
</tr>
<tr>
<td>111111</td>
<td>张三张三张三张三</td>
<td>男男男男男</td>
<td>181818</td>
</tr>
<tr>
<td>111111</td>
<td>张三张三张三张三</td>
<td>男男男男男</td>
<td>181818</td>
</tr>
<tr>
<td>111111</td>
<td>张三张三张三张三</td>
<td>男男男男男</td>
<td>181818</td>
</tr>
<tr>
<td>111111</td>
<td>张三张三张三张三</td>
<td>男男男男男</td>
<td>181818</td>
</tr>
<tr>
<td>111111</td>
<td>张三张三张三张三</td>
<td>男男男男男</td>
<td>181818</td>
</tr>
<tr>
<td>111111</td>
<td>张三张三张三张三</td>
<td>男男男男男</td>
<td>181818</td>
</tr>
<tr>
<td>111111</td>
<td>张三张三张三张三</td>
<td>男男男男男</td>
<td>181818</td>
</tr>
<tr>
<td>111111</td>
<td>张三张三张三张三</td>
<td>男男男男男</td>
<td>181818</td>
</tr>
<tr>
<td>111111</td>
<td>张三张三张三张三</td>
<td>男男男男男</td>
<td>181818</td>
</tr>
<tr>
<td>111111</td>
<td>张三张三张三张三</td>
<td>男男男男男</td>
<td>181818</td>
</tr>
<tr>
<td>111111</td>
<td>张三张三张三张三</td>
<td>男男男男男</td>
<td>181818</td>
</tr>
<tr>
<td>111111</td>
<td>张三张三张三张三</td>
<td>男男男男男</td>
<td>181818</td>
</tr>
<tr>
<td>111111</td>
<td>张三张三张三张三</td>
<td>男男男男男</td>
<td>181818</td>
</tr>
<tr>
<td>111111</td>
<td>张三张三张三张三</td>
<td>男男男男男</td>
<td>181818</td>
</tr>
<tr>
<td>111111</td>
<td>张三张三张三张三</td>
<td>男男男男男</td>
<td>181818</td>
</tr>
<tr>
<td>111111</td>
<td>张三张三张三张三</td>
<td>男男男男男</td>
<td>181818</td>
</tr>
<tr>
<td>111111</td>
<td>张三张三张三张三</td>
<td>男男男男男</td>
<td>181818</td>
</tr>
<tr>
<td>111111</td>
<td>张三张三张三张三</td>
<td>男男男男男</td>
<td>181818</td>
</tr>
<tr>
<td>111111</td>
<td>张三张三张三张三</td>
<td>男男男男男</td>
<td>181818</td>
</tr>
<tr>
<td>111111</td>
<td>张三张三张三张三</td>
<td>男男男男男</td>
<td>181818</td>
</tr>
</table>
</div>
<!--【表身】-->
<!--【fixed-tfoot表尾】-->
<table class="form-table fixed-tfoot" cellpadding="0" cellspacing="0">
<tr>
<td>序号</td>
<td>姓名</td>
<td>性别</td>
<td>年龄</td>
</tr>
</table>
<!--【fixed-tfoot表尾】-->
</div>
<!--container-->
<p class="tip">
实现：table表格，表头、表尾固定；表身内容随着内容增加，出现滚动条，滚动下拉滚动条显示内容；<br />
这个demo是通过3个table来实现。表头，表尾的table实现固定不动。中间的table外面，嵌套一层div。设置div的高度并添加overflow:auto
来实现滚动条<br />
</p>
</body>
</html>
示例演示：demo
css表格表头表尾固定，表身滚动的更多相关文章
- asp.net table表格表头及列固定实现
http://blog.csdn.net/zdw_wym/article/details/48630337 在开发中常会遇到table表格中列特别多,下拉后,表头就看不见了,水平滚动后,第1.2列就看 ...
- 表头表侧边固定，方法二，丫的，复制td
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
- CSS样式实现表头和列固定
效果图:第一行和第一列固定 <!DOCTYPE html> <html lang="zh"> <head> <meta cha ...
- TableView之表头、表尾，区头、区尾！
一.UITableView的UITableViewStyle 样式分为UITableViewStylePlain和UITableViewStyleGrouped两种: plain样式下区头和区尾是悬浮 ...
- HTML基础知识（表格、表单）
6.表格 l 概念:表格一定具有行和列 注:使用<thead><tbody><tfoot>,使浏览器能独立于表格表头和表格页脚的表格主体滚动.当包含多个页面的表格 ...
- div+css实现表头固定内容滚动表格
<div class="m-demo"> <table> <thead> <tr><th>定宽a</th>& ...
- css固定表格表头(各浏览器通用)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- css表格表单和统筹
css:表格表单和统筹 学习目标 1.表单标签及属性高级 2.表格标签及属性高级 3.CSS统筹 4.BFC概念和应用场景 一.表单标签及属性高级 回顾: 表单的作用:用来收集用户的信息的; 表单的组 ...
- Javascript 固定表格表头
遇到一个简单的需求: 客户有一个表格可能有很多内容,当内容很多的时候,表格就会出现滚动条 客户希望当表格内容很多时,只滚动表格而不滚动浏览器窗口 在网上找到很多相关的插件,要不就是太复杂,要不就是满足 ...
随机推荐
- c#抽象工厂类
抽象工厂类的结构如下: 工厂 a=new 1工厂 抽象类A aa=a.createA() aa.create()==类A1.create() 抽象类B bb=a.createB() bb.get()= ...
- 动态获取爱奇艺上传视频mp4格式url地址
有时候,在工作中有些客户需要用到视频,我们大家都知道视频是非常的耗费流量的,因此,如果因为项目要求客户单独买台视频服务器是非常划不来的.那么将视频上传到优酷,爱奇艺等视频网站来托管那是一件很好的解决方 ...
- 布局时margin会影响父元素
布局时margin会影响父元素.md 在布局使用margin时 <div class="login-bg"> <div class="login&quo ...
- python with关键字学习
1.with语句时用于对try except finally 的优化,让代码更加美观, 例如常用的开发文件的操作,用try except finally 实现: f=open('file_name', ...
- MVC-起始页面设置
MVC的URL是通过路由映射的,因为我们可以通过修改RouteConfig来改变应用的起始页面. public class RouteConfig { public static void Regis ...
- unity3d游戏开发——新手引导
GUI实现,如下: 按“G”键开始新手引导 代码如下: using UnityEngine; using System.Collections; public class OkButton : GUI ...
- Quartz Scheduler 开发指南（1）
Quartz Scheduler 开发指南(1) 原文地址:http://www.quartz-scheduler.org/generated/2.2.2/html/qtz-all/ 实例化调度程序( ...
- margin负值的使用
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- linux运维面试题
一.有文件file1 1.查询file1 里面空行的所在行号 grep -n "^#" file1 or awk ‗{if($0~/^$/)print NR}‘ file or g ...
- java对xml文件做增删改查
http://www.cnblogs.com/wangchenyang/archive/2011/08/23/2150530.html http://www.blogjava.net/weishuan ...