有時候，我們在開發前端頁面過程中，可能會用到這種表格：表頭固定不動，表格內容（<tbody>）需要豎直滾動。
像這樣的：
還有這樣的：
通過研究，我大致總結了以下三種實現辦法供大家參考，如果有錯誤之處敬請指正，也歡迎拍磚！！
一、表格總寬度自動，每列寬度設置統一用
<colgroup>設置
這種實現方法最簡單，只需要用兩個表格，一個表格作為表頭，另一個表格用<div>包裹並設置該<div>的高度固定，高度溢出可滾動即可。兩個表格的列寬用相同的<colgroup>固定列寬值，需要注意的是滾動條會占用一定的寬度，一般是：17px，所以在表頭需要特別處理一下，不然表格就不能對齊了。大家看代碼，最簡單的辦法是表頭單獨空一列和下面的表格滾動條對齊。
<div class="tableWrap" style="margin:20px;"> <label>可滾動表格——表格寬度自動每列寬度設置<col></label> <table class="table-thead"> <colgroup> <col width="50"> <col width="100"> <col width="150"> <col width="17"> </colgroup> <thead> <tr> <th>序號</th> <th>賬戶名稱</th> <th>賬戶編號</th> <th></th> </tr> </thead> </table> <div class="comTbody"> <table class="table-tbody" style="border-top: 0;"> <colgroup> <col width="50"> <col width="100"> <col width="150"> </colgroup> <tbody> <tr> <td>1</td> <td>中國電信</td> <td>12312312313132</td> </tr> <tr> <td>1</td> <td>中國電信</td> <td>12312312313132</td> </tr> <tr> <td>1</td> <td>中國電信</td> <td>12312312313132</td> </tr> <tr> <td>1</td> <td>中國電信</td> <td>12312312313132</td> </tr> <tr> <td>1</td> <td>中國電信</td> <td>12312312313132</td> </tr> </tbody> </table> </div> </div>
第一種方法是我自己為了快速實現采用的辦法，過后我想起來經常看到的數據表格（dataGrid），也是表頭固定，內容可以滾動，比如嘴上那兩張圖片分別是：kendo UI——grid、easyUI——dataGrid 。這樣的表格看起來挺漂亮的，我研究了一下，發現它們兩種有各自的實現方式。這兩種表格在實際運用中因為綁定了很多JS事件，所以表格嵌套的層級很多，下面我為了更清晰的展示給大家，簡化了嵌套。
二、表格寬度
100%，列寬度統一用<colgroup>設置————參考Kendo UI——grid
<label>可滾動表格——表格寬度100%，列寬度設置<col></label> <div class="table-wrap"> <div class="table-head"> <div class="table-head-wrap"> <table class="grid"> <colgroup> <col style="width:80px"> <col> <col> <col style="width:150px"> </colgroup> <thead> <tr> <th> <span class="tab-link">序號</span> </th> <th> <span class="tab-link">姓名</span> </th> <th> <span class="tab-link">年齡</span> </th> <th> <span class="tab-link">地址</span> </th> </tr> </thead> </table> </div> </div> <div class="table-content"> <table class="grid"> <colgroup> <col style="width:80px"> <col> <col> <col style="width:150px"> </colgroup> <tbody> <tr> <td> <div>001</div> </td> <td> <div>小明</div> </td> <td> <div>23</div> </td> <td> <div>上海</div> </td> </tr> <tr> <td> <div>001</div> </td> <td> <div>小明</div> </td> <td> <div>23</div> </td> <td> <div>上海</div> </td> </tr> <tr> <td> <div>001</div> </td> <td> <div>小明</div> </td> <td> <div>23</div> </td> <td> <div>上海</div> </td> </tr> <tr> <td> <div>001</div> </td> <td> <div>小明</div> </td> <td> <div>23</div> </td> <td> <div>上海</div> </td> </tr> <tr> <td> <div>001</div> </td> <td> <div>小明</div> </td> <td> <div>23</div> </td> <td> <div>上海</div> </td> </tr> </tbody> </table> </div> </div>
這里表格添加了一個樣式：table-layout: fixed; 列寬由表格寬度和列寬度設定。這種方法適用於，表格寬度固定。
三、表格寬度自動，列寬度精確固定設置
————參考easyUI
——dataGrid
<div class="data-grid"> <div class="data-view"> <div class="grid-head"> <div class="grid-head-inner"> <table class="data-table"> <tbody> <tr class="data-table-row"> <td> <div class="datagrid-cell cell-c1"> <div>Item ID</div> </div> </td> <td> <div class="datagrid-cell cell-c2"> <div>Product</div> </div> </td> <td> <div class="datagrid-cell cell-c3"> <div>List Price</div> </div> </td> <td> <div class="datagrid-cell cell-c4"> <div>Unit Cost</div> </div> </td> <td> <div class="datagrid-cell cell-c5"> <div>Attribute</div> </div> </td> </tr> </tbody> </table> </div> </div> <div class="grid-body"> <table class="datagrid-btable"> <tbody> <tr> <td> <div class="datagrid-cell cell-c1"> <span>EST-1</span> </div> </td> <td> <div class="datagrid-cell cell-c2"> <span>FI-SW-01</span> </div> </td> <td> <div class="datagrid-cell cell-c3"> <span>36.5</span> </div> </td> <td> <div class="datagrid-cell cell-c4"> <span>10</span> </div> </td> <td> <div class="datagrid-cell cell-c5"> <span>Large</span> </div> </td> </tr> <tr> <td> <div class="datagrid-cell cell-c1"> <span>EST-1</span> </div> </td> <td> <div class="datagrid-cell cell-c2"> <span>FI-SW-01</span> </div> </td> <td> <div class="datagrid-cell cell-c3"> <span>36.5</span> </div> </td> <td> <div class="datagrid-cell cell-c4"> <span>10</span> </div> </td> <td> <div class="datagrid-cell cell-c5"> <span>Large</span> </div> </td> </tr> <tr> <td> <div class="datagrid-cell cell-c1"> <span>EST-1</span> </div> </td> <td> <div class="datagrid-cell cell-c2"> <span>FI-SW-01</span> </div> </td> <td> <div class="datagrid-cell cell-c3"> <span>36.5</span> </div> </td> <td> <div class="datagrid-cell cell-c4"> <span>10</span> </div> </td> <td> <div class="datagrid-cell cell-c5"> <span>Large</span> </div> </td> </tr> <tr> <td> <div class="datagrid-cell cell-c1"> <span>EST-1</span> </div> </td> <td> <div class="datagrid-cell cell-c2"> <span>FI-SW-01</span> </div> </td> <td> <div class="datagrid-cell cell-c3"> <span>36.5</span> </div> </td> <td> <div class="datagrid-cell cell-c4"> <span>10</span> </div> </td> <td> <div class="datagrid-cell cell-c5"> <span>Large</span> </div> </td> </tr> <tr> <td> <div class="datagrid-cell cell-c1"> <span>EST-1</span> </div> </td> <td> <div class="datagrid-cell cell-c2"> <span>FI-SW-01</span> </div> </td> <td> <div class="datagrid-cell cell-c3"> <span>36.5</span> </div> </td> <td> <div class="datagrid-cell cell-c4"> <span>10</span> </div> </td> <td> <div class="datagrid-cell cell-c5"> <span>Large</span> </div> </td> </tr> <tr> <td> <div class="datagrid-cell cell-c1"> <span>EST-1</span> </div> </td> <td> <div class="datagrid-cell cell-c2"> <span>FI-SW-01</span> </div> </td> <td> <div class="datagrid-cell cell-c3"> <span>36.5</span> </div> </td> <td> <div class="datagrid-cell cell-c4"> <span>10</span> </div> </td> <td> <div class="datagrid-cell cell-c5"> <span>Large</span> </div> </td> </tr> <tr> <td> <div class="datagrid-cell cell-c1"> <span>EST-1</span> </div> </td> <td> <div class="datagrid-cell cell-c2"> <span>FI-SW-01</span> </div> </td> <td> <div class="datagrid-cell cell-c3"> <span>36.5</span> </div> </td> <td> <div class="datagrid-cell cell-c4"> <span>10</span> </div> </td> <td> <div class="datagrid-cell cell-c5"> <span>Large</span> </div> </td> </tr> </tbody> </table> </div> </div> </div>
這種方法適用於每列寬度固定的表格。
這里是我寫的源碼：點我下載