table头部、尾部固定;中间内容定高自适应滚动

最新推荐文章于 2024-01-31 18:15:24 发布

18790970257

最新推荐文章于 2024-01-31 18:15:24 发布

阅读量446

点赞数

文章标签：前端 javascript ViewUI

原文链接：http://www.cnblogs.com/leshao/p/5697177.html

版权

table头部、尾部固定;中间内容定高自适应滚动

很多时候，需要使用到表格做数据分析，不管是前端展现，还是后台管理系统节点展现

工作过程中遇到了，作为一个小笔记，备忘！

如下图所示

---------------------------------------------------------------------------------------------------------------------

------------------------------------------------------------------------------------------------------------------------------

表格的头部，和尾部是固定不动的，中间内容随着内容的增多，而出现滚动条。

</tbody>

</table>

</div>

如上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去实现

----------------------------------------------------

下载地址：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://www.cnblogs.com/leshao/p/5697177.html