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# 实现对窗体（Form）换肤
http://www.csharpwin.com/csharpresource/2992.shtml 一直想写一个比较完整的.容易扩展的窗体换肤的方案,由于时间问题,都没去实现这个想法.现在有朋友提出 ...
- 图片裁切插件jCrop的使用心得（四）
在本篇中我来介绍一下jcrop如何实时展现用户裁切的效果图以及在项目中使用该插件注意的问题. 首先,你们在创建头像时,都可以在旁边实时的看到我裁切后的效果图,就如博客园. 这个是如何实现的呢,其实并不 ...
- css3的3D翻牌效果
利用hover控制动画,一个从翻面向正面翻,一个从正面向反面翻. 利用:backface-visibility: hidden;控制反面的元素不显示. 不支持的浏览器直接切换层级换图. <!DO ...
- prefixfree.js介绍
假如你现在正学习着强大的Css3,你知道Css3的很多数属性为实验属性,使用他们的时候得加上各式各样的浏览器前缀.可能你默默忍受了,因为还没到统一的时间.有没想过给自己减下负,偶然间在网上看到一个js ...
- perl命令批量替换文件内容
转自:http://www.jbxue.com/article/12638.html 使用perl命令批量替换文件内容. 对linux下的文件内容进行替换,有时不用编写perl脚本,用perl命令就可 ...
- ecshop会员中心增加订单搜索功能
在user.php中的act=order_list中增加以下程序. $order_sn = isset($_REQUEST['order_sn'])?$_REQUEST['order_sn']:''; ...
- 走进WCF一 （异常如此多娇，引无数码农竞折煞）
对于WCF一直都是只知其然,公司框架的架构者也只是对我们授之以鱼,而不授之以渔. 带着初学者的态度进入了大神Artech的博客,逐步慢慢上手. 我的解决方案(和大神的一模一样,只是过程中一波三折的) ...
- Django操作数据库
引入models的定义 from app.models import myclass class myclass(): aa = models. CharField (max_leng ...
- 加解密算法二：非对称加解密及RSA算法的实现
加密和解密使用不同的密钥的一类加密算法.这类加密算法通常有两个密钥A和B,使用密钥A加密数据得到的密文,只有密钥B可以进行解密操作(即使密钥A也无法解密):相反,使用密钥B加密数据得到的密文,只有密钥 ...
- 成为Java GC专家（5）—Java性能调优原则
并不是每个程序都需要调优.如果一个程序性能表现和预期一样,你不必付出额外的精力去提高它的性能.然而,在程序调试完成之后,很难马上就满足它的性能需求,于是就有了调优这项工作.无论哪种编程语言,对应用程序 ...