首页 > 代码库 > table头部、尾部固定;中间内容定高自适应滚动

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

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.onload=window.onresize=function (){
var body=document.getElementById("body");
var head=document.getElementById("head");
head.style.width=(body.scrollWidth)+"px";
}
</script>

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

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