table头部、尾部固定;中间内容定高自适应滚动
2016-07-22 21:24
429 查看
table头部、尾部固定;中间内容定高自适应滚动
很多时候,需要使用到表格做数据分析,不管是前端展现,还是后台管理系统节点展现
工作过程中遇到了,作为一个小笔记,备忘!
如下图所示
---------------------------------------------------------------------------------------------------------------------
![](https://images2015.cnblogs.com/blog/777572/201607/777572-20160722211536497-580837983.png)
------------------------------------------------------------------------------------------------------------------------------
表格的头部,和尾部是固定不动的,中间内容随着内容的增多,而出现滚动条。
<!--container-->
<div class="container">
<table class="form-table" cellpadding="0" cellspacing="0">
<thead class="fixed-thead" id="head">
<tr>
<th>序号</th>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
</thead>
<tbody class="scroll-tbody" id="body">
<tr>
<td>1</td>
<td>张三</td>
<td>男</td>
<td>18</td>
</tr>
</tbody>
<tfoot class="fixed-tfoot">
<tr>
<td>序号</td>
<td>姓名</td>
<td>性别</td>
<td>年1龄</td>
</tr>
</tfoot>
</table>
</div>
<!--container-->
如上html结构简单。精简。
/*各个部分样式*/
@charset "utf-8";
body{
overflow: hidden;
}
.container {
border: 1px #ccc solid;
width: 90%;
margin: 100px auto;
}
.form-table {
width: 100%;
border-collapse: collapse;
margin: 0 auto;
text-align: center;
table-layout: fixed;
}
.form-table th {
border-left: none;
border-top: none;
border-right: 1px #ccc solid;
border-bottom: 1px #ccc solid;
background: #F3F3F3;
}
.form-table td {
border-left: none;
border-top: none;
border-bottom: 1px #ccc solid;
border-right: 1px #ccc solid;
}
.fixed-thead,
.fixed-tfoot {
display: block;
/*width: 99%;*/
width: -webkit-calc(100% - 17px);
width: -moz-calc()(100% - 17px);
width: calc(100% - 17px);
height: 50px;
}
.fixed-tfoot tr td {
background: #F3F3F3;
border-bottom: none;
}
.fixed-thead tr,
.fixed-tfoot tr {
width: 100%;
height: 50px;
line-height: 50px;
display: block;
}
.fixed-thead tr th,
.fixed-tfoot tr td {
float: left;
display: block;
width: 25%;
height: 50px;
font-size: 16px;
text-align: center;
}
.scroll-tbody {
display: block;
height: 306px;
overflow: auto;
width: 100%;
}
.scroll-tbody tr {
width: 100%;
display: block;
height: 40px;
line-height: 40px;
}
.scroll-tbody tr td {
float: left;
display: block;
width: 25%;
}
.form-table .scroll-tbody tr:nth-child(odd) td {
background-color: #ECE9D8;
}
-------------------核心对齐样式---------------------
width: -webkit-calc(100% - 17px);
width: -moz-calc()(100% - 17px);
width: calc(100% - 17px);
兼容高级浏览器
-----------------------------------------------------
为了兼容IE6,可以使用如下 js去实现
<script type="text/javascript">
window.onload=window.onresize=function (){
var body=document.getElementById("body");
var head=document.getElementById("head");
head.style.width=(body.scrollWidth)+"px";
}
</script>
----------------------------------------------------
下载地址:http://files.cnblogs.com/files/leshao/table%E8%A1%A8%E6%A0%BC%E5%86%85%E5%AE%B9%E6%BB%9A%E5%8A%A8-calc%E7%89%88.rar
感谢 兴友、炜等人的协助得以完善,精益求精!
=============二次完善追加如下===========================
鉴于之前的积累,这个初稿很快的实现了
<table>
<thead></thead>--------设置 display: block;padding-right:17px;
<tbody>
<td></td>----设置display: block; float: left;width: 100%/X;(x为td数量个数)
</tbody>--------设置 display: block;固定高度,overflow: auto;
<tfoot></tfoot>--------设置 display: block;
</table>
如上,很快实现初稿。单一table布局,width: calc(100% - 17px);是css3的属性,可以使用padding-right:17px;
为了使得头和尾和中间的滚动条对齐
不足之处,得写死td宽度,不能自适应。这个目前,是项目中,采取的办法,只能通过,获取后台数据,在js动态计算
td个数,并重新赋值来实现了。
然,如果是移动端的需求呢?
那便可以非常简单的实现,只需要使用单一table布局,添加盒子模型display: -webkit-flex;即可实现均分。自适应td列数了
<table>
<thead></thead>--------设置 display: block;width: calc(100% - 17px);
<tbody>
<tr></tr>----设置display: -webkit-flex;
</tbody>--------设置 display: block;固定高度,overflow: auto;
<tfoot></tfoot>--------设置 display: block;
</table>
此举,轻而易举实现。
完结。
感谢 辉,lost,杨楠等&……
下载地址:
单个table表头固定 http://files.cnblogs.com/files/leshao/%E5%8D%95%E4%B8%AAtable%E8%A1%A8%E5%A4%B4%E5%9B%BA%E5%AE%9A.rar flex实现table表头固定 http://files.cnblogs.com/files/leshao/flex%E5%AE%9E%E7%8E%B0table%E8%A1%A8%E5%A4%B4%E5%9B%BA%E5%AE%9A.rar
很多时候,需要使用到表格做数据分析,不管是前端展现,还是后台管理系统节点展现
工作过程中遇到了,作为一个小笔记,备忘!
如下图所示
---------------------------------------------------------------------------------------------------------------------
![](https://images2015.cnblogs.com/blog/777572/201607/777572-20160722211536497-580837983.png)
------------------------------------------------------------------------------------------------------------------------------
表格的头部,和尾部是固定不动的,中间内容随着内容的增多,而出现滚动条。
<!--container-->
<div class="container">
<table class="form-table" cellpadding="0" cellspacing="0">
<thead class="fixed-thead" id="head">
<tr>
<th>序号</th>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
</thead>
<tbody class="scroll-tbody" id="body">
<tr>
<td>1</td>
<td>张三</td>
<td>男</td>
<td>18</td>
</tr>
</tbody>
<tfoot class="fixed-tfoot">
<tr>
<td>序号</td>
<td>姓名</td>
<td>性别</td>
<td>年1龄</td>
</tr>
</tfoot>
</table>
</div>
<!--container-->
如上html结构简单。精简。
/*各个部分样式*/
@charset "utf-8";
body{
overflow: hidden;
}
.container {
border: 1px #ccc solid;
width: 90%;
margin: 100px auto;
}
.form-table {
width: 100%;
border-collapse: collapse;
margin: 0 auto;
text-align: center;
table-layout: fixed;
}
.form-table th {
border-left: none;
border-top: none;
border-right: 1px #ccc solid;
border-bottom: 1px #ccc solid;
background: #F3F3F3;
}
.form-table td {
border-left: none;
border-top: none;
border-bottom: 1px #ccc solid;
border-right: 1px #ccc solid;
}
.fixed-thead,
.fixed-tfoot {
display: block;
/*width: 99%;*/
width: -webkit-calc(100% - 17px);
width: -moz-calc()(100% - 17px);
width: calc(100% - 17px);
height: 50px;
}
.fixed-tfoot tr td {
background: #F3F3F3;
border-bottom: none;
}
.fixed-thead tr,
.fixed-tfoot tr {
width: 100%;
height: 50px;
line-height: 50px;
display: block;
}
.fixed-thead tr th,
.fixed-tfoot tr td {
float: left;
display: block;
width: 25%;
height: 50px;
font-size: 16px;
text-align: center;
}
.scroll-tbody {
display: block;
height: 306px;
overflow: auto;
width: 100%;
}
.scroll-tbody tr {
width: 100%;
display: block;
height: 40px;
line-height: 40px;
}
.scroll-tbody tr td {
float: left;
display: block;
width: 25%;
}
.form-table .scroll-tbody tr:nth-child(odd) td {
background-color: #ECE9D8;
}
-------------------核心对齐样式---------------------
width: -webkit-calc(100% - 17px);
width: -moz-calc()(100% - 17px);
width: calc(100% - 17px);
兼容高级浏览器
-----------------------------------------------------
为了兼容IE6,可以使用如下 js去实现
<script type="text/javascript">
window.onload=window.onresize=function (){
var body=document.getElementById("body");
var head=document.getElementById("head");
head.style.width=(body.scrollWidth)+"px";
}
</script>
----------------------------------------------------
下载地址:http://files.cnblogs.com/files/leshao/table%E8%A1%A8%E6%A0%BC%E5%86%85%E5%AE%B9%E6%BB%9A%E5%8A%A8-calc%E7%89%88.rar
感谢 兴友、炜等人的协助得以完善,精益求精!
=============二次完善追加如下===========================
鉴于之前的积累,这个初稿很快的实现了
<table>
<thead></thead>--------设置 display: block;padding-right:17px;
<tbody>
<td></td>----设置display: block; float: left;width: 100%/X;(x为td数量个数)
</tbody>--------设置 display: block;固定高度,overflow: auto;
<tfoot></tfoot>--------设置 display: block;
</table>
如上,很快实现初稿。单一table布局,width: calc(100% - 17px);是css3的属性,可以使用padding-right:17px;
为了使得头和尾和中间的滚动条对齐
不足之处,得写死td宽度,不能自适应。这个目前,是项目中,采取的办法,只能通过,获取后台数据,在js动态计算
td个数,并重新赋值来实现了。
然,如果是移动端的需求呢?
那便可以非常简单的实现,只需要使用单一table布局,添加盒子模型display: -webkit-flex;即可实现均分。自适应td列数了
<table>
<thead></thead>--------设置 display: block;width: calc(100% - 17px);
<tbody>
<tr></tr>----设置display: -webkit-flex;
</tbody>--------设置 display: block;固定高度,overflow: auto;
<tfoot></tfoot>--------设置 display: block;
</table>
此举,轻而易举实现。
完结。
感谢 辉,lost,杨楠等&……
下载地址:
单个table表头固定 http://files.cnblogs.com/files/leshao/%E5%8D%95%E4%B8%AAtable%E8%A1%A8%E5%A4%B4%E5%9B%BA%E5%AE%9A.rar flex实现table表头固定 http://files.cnblogs.com/files/leshao/flex%E5%AE%9E%E7%8E%B0table%E8%A1%A8%E5%A4%B4%E5%9B%BA%E5%AE%9A.rar
相关文章推荐
- linux笔记十----虚拟机网络配置
- Java 数据转换
- 常用算法思想之:递推思想
- php封装类 实现图片上传
- 如何使用java中的对象
- Nginx SSI 设置
- springmvc的拦截器
- hdoj 1061 Rightmost Digit
- oracle11g plsql调试存储过程卡死的处理技巧
- 推荐算法:基于svd的算法:基于领域
- hdu 5724(博弈)
- 栈(数组实现)
- [置顶] 求解单源最短路径:Dijkstara算法典型示例
- Byte[] to InputStream or OutputStream
- Samy XSS Worm 分析
- GUI为什么不设计为多线程(用户事件和底层事件的流程是相反的,每层都加锁效率太低,共用一把锁那就是单线程)
- Pku oj 1905 Expanding Rods(简单几何加二分)
- HDOJ 2041 超级楼梯
- Android 拖动条(SeekBar)实例 附完整demo项目代码
- 合格程序员的基本素质