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# winform关于DataGridView的一些操作
设置字段名 设置字段值 设定单元格表示 Error图标 设定当前单元格 取得当前单元格内容 取得当前单元格的列 Index 取得当前单元格的行 Index 向下一行 向上一行 取消 DataGridV ...
- Angular ng-repeat
<tr ng-repeat="(key,item) in tableData"> <td class="check hidden-xs"> ...
- TCP UDP 协议的选择
行业应用中TCP/IP传输协议和UDP协议的选择! 中国移动.中国联通推行的GPRS网络.CDMA网络已覆盖大量的区域,通过无线网络实现数据传输成为可 能.无线Modem采用GPRS.CDMA模块通过 ...
- SDC(6)–I/O约束
应理解为仅限于内部的约束.即从输入Pin到寄存器D口,以及从寄存器Q口到输出Pin. 例如: 约束如下: 注意set_output_delay的计算
- 如何让listview列表为空时显示提示
先在布局文件中声明一个TextView,再设置listview.setEmptyView(TextView).这样当listview中的数据为空时就会列表的位置就会显示textviw中的提示.
- 基于Mahout的电影推荐系统
基于Mahout的电影推荐系统 1.Mahout 简介 Apache Mahout 是 Apache Software Foundation(ASF) 旗下的一个开源项目,提供一些可扩展的机器学习领域 ...
- 问题分享：ActiveX component can't create object: "MSComDlg.CommonDialog"
问题描述: 修改一个前辈的代码,在我自己电脑上面运行的很好,但是放到要用户电脑(win7 x64)上面却跑不了,报个如题的错误. 查了下是COMDLG32.OCX的问题,用到控件的地方是: Dim o ...
- Linux数组array基础
Linux数组array基础[${a[*]}和$a的区别] Bash中,数组变量的赋值有两种方法: (1) name = (value1 ... valuen) 此时下标从0开始 (2) name[i ...
- gei shilei d
body, p { margin: 0; padding: 0; font-size: 16px; } div { margin: 0 auto; } .wrapper { width: 1080px ...
- GCC 警告提示的用法
转自GCC 警告提示的用法 本节主要讲解GCC的警告提示功能.GCC包含完整的出错检查和警告提示功能,它们可以帮助Linux程序员写出更加专业和优美的代码.我们千万不能小瞧这些警告信息,在很多情况下, ...