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

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

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

如下图所示

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

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

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

<!--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.οnlοad=window.οnresize=function (){

var body=document.getElementById("body");

var head=document.getElementById("head");

head.style.width=(body.scrollWidth)+"px";

}

</script>

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