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 固定表格表头
遇到一个简单的需求: 客户有一个表格可能有很多内容,当内容很多的时候,表格就会出现滚动条 客户希望当表格内容很多时,只滚动表格而不滚动浏览器窗口 在网上找到很多相关的插件,要不就是太复杂,要不就是满足 ...
随机推荐
- ASP.Net MVC 生成安全验证码
---------html <td>验证码:</td> <td> <img src="/Logi ...
- animation css3动画与CSS3 @keyframes担配使用创建往复平缓动画
通过 @keyframes 规则,您能够创建动画. 创建动画的原理是,将一套 CSS 样式逐渐变化为另一套样式. 在动画过程中,您能够多次改变这套 CSS 样式. 以百分比来规定改变发生的时间,或者通 ...
- C#动态生成图书信息XML文件
通过C#动态生成图书信息XML文件,下面有个不错的示例,需要的朋友可以参考下 通过C#动态生成图书信息XML文件(Books.xml),文件如下: 复制代码代码如下: <?xml version ...
- JS 操作URL(重要)
我们可以用javascript获得其中的各个部分1, window.location.href全部URl字符串(在浏览器中就是完整的地址栏)本例返回值: http://www.x2y2.com:80/ ...
- VS Extension: Create a txt file and set the content
使用 Visual Studio Extension 创建一个文本文件,并填入内容. 需要引用 EnvDTE C:\Program Files (x86)\Microsoft Visual Studi ...
- 安全测试常见的10个问题 ZT
1, 问题:没有被验证的输入 测试方法: 数据类型(字符串,整型,实数,等) 允许的字符集 最小和最大的长度 是否允许空输入 参数是否是必须的 重复是否允 ...
- 增加Android可用内存
In the development of TV applications, especially when dealing with images were more likely to feel ...
- SQL Server中时间段查询
/****** Script for SelectTopNRows command from SSMS ******/ select * from dbo.VehicleData20100901 wh ...
- Yorhom浅谈：作为一名初中生，自学编程的点点滴滴 - Yorhom's Game Box
Yorhom浅谈:作为一名初中生,自学编程的点点滴滴 我是一名不折不扣的初中生,白天要背着书包去上学,晚上要拿起笔写作业.天天如此,年年如此. 我的爱好很广泛,喜欢了解历史,读侦探小说,骑车,打篮球, ...
- 打死也不换系统？笑谈过气的Windows XP
http://tech.qq.com/a/20131012/007336.htm 按照IT领域的“安迪-比尔定律”:软件和游戏不断生成过户需求,硬件则通过技术创新来消化这些需求,这个过程会刺激用户在电 ...