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>

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

下載地址：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