1. 需求
表格很长，这个时候就希望表格头部不动，而只是表格内容行支持滚动功能。
2. 方法
- 两张表：一张表(THeader)负责头部字段的显示，另一张表(TBody)负责内容行字段的显示。
- 两张表都存放在一个div中
- THeader、TBody分别存放在一个div中
- 整个div不支持滚动条：overflow: hidden
- 包住TBody的div支持滚动条：overflow-y: scroll
- THeader的显示字段比Tbody多一个：用来存放滚动条的位置，宽度设置为17px
- TBody的高度需要通过JavaScript来计算，可以使用onresize事件动态触发高度的变化
3. 代码
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Table</title> <style> table { width: 100%; border-collapse: collapse; border-radius: 4px; } th, td { text-align: center; border: 1px solid green; } th { background-color: rgba(167, 167, 167, 0.5); font-size: 15px; } td { font-size: 14px; } tr:nth-child(even) { background-color: #e8f5ed; } .table-col-1 { width: 30px; } .table-col-2 { width: 60px; } .table-col-3 { width: 80px; } .table-col-4 { width: 22px; } /* .table-col-5 { 30px; } 这列作为动态宽度值 */ .table-col-6 { width: 140px; } .table-col-7 { width: 220px; } .table-col-8 { width: 180px; } .table-col-9 { width: 16px; } #idTableBody { width: 100%; overflow-y: scroll; height: 120px; /* 如果需要动态的表格内容高度，可以将高度属性的设置转移到onresize事件中实现 */ } </style> </head> <body> <div class="table-details"> <div id="idTableHeader"> <table> <colgroup> <col class="table-col-1"> <col class="table-col-2"> <col class="table-col-3"> <col class="table-col-4"> <col class="table-col-5"> <col class="table-col-6"> <col class="table-col-7"> <col class="table-col-8"> <col class="table-col-9"> </colgroup> <tr> <th>1</th> <th>1</th> <th>1</th> <th>1</th> <th>1</th> <th>1</th> <th>1</th> <th>1</th> <th></th> </tr> </table> </div> <div id="idTableBody"> <table> <colgroup> <col class="table-col-1"> <col class="table-col-2"> <col class="table-col-3"> <col class="table-col-4"> <col class="table-col-5"> <col class="table-col-6"> <col class="table-col-7"> <col class="table-col-8"> </colgroup> <tr> <td>1</td> <td>1</td> <td>1</td> <td>1</td> <td>1</td> <td>1</td> <td>1</td> <td>1</td> </tr> <tr> <td>1</td> <td>1</td> <td>1</td> <td>1</td> <td>1</td> <td>1</td> <td>1</td> <td>1</td> </tr> <tr> <td>1</td> <td>1</td> <td>1</td> <td>1</td> <td>1</td> <td>1</td> <td>1</td> <td>1</td> </tr> <tr> <td>1</td> <td>1</td> <td>1</td> <td>1</td> <td>1</td> <td>1</td> <td>1</td> <td>1</td> </tr> <tr> <td>1</td> <td>1</td> <td>1</td> <td>1</td> <td>1</td> <td>1</td> <td>1</td> <td>1</td> </tr> <tr> <td>1</td> <td>1</td> <td>1</td> <td>1</td> <td>1</td> <td>1</td> <td>1</td> <td>1</td> </tr> <tr> <td>1</td> <td>1</td> <td>1</td> <td>1</td> <td>1</td> <td>1</td> <td>1</td> <td>1</td> </tr> <tr> <td>1</td> <td>1</td> <td>1</td> <td>1</td> <td>1</td> <td>1</td> <td>1</td> <td>1</td> </tr> <tr> <td>1</td> <td>1</td> <td>1</td> <td>1</td> <td>1</td> <td>1</td> <td>1</td> <td>1</td> </tr> <tr> <td>1</td> <td>1</td> <td>1</td> <td>1</td> <td>1</td> <td>1</td> <td>1</td> <td>1</td> </tr> <tr> <td>1</td> <td>1</td> <td>1</td> <td>1</td> <td>1</td> <td>1</td> <td>1</td> <td>1</td> </tr> <tr> <td>1</td> <td>1</td> <td>1</td> <td>1</td> <td>1</td> <td>1</td> <td>1</td> <td>1</td> </tr> <tr> <td>1</td> <td>1</td> <td>1</td> <td>1</td> <td>1</td> <td>1</td> <td>1</td> <td>1</td> </tr> <tr> <td>1</td> <td>1</td> <td>1</td> <td>1</td> <td>1</td> <td>1</td> <td>1</td> <td>1</td> </tr> <tr> <td>1</td> <td>1</td> <td>1</td> <td>1</td> <td>1</td> <td>1</td> <td>1</td> <td>1</td> </tr> <tr> <td>1</td> <td>1</td> <td>1</td> <td>1</td> <td>1</td> <td>1</td> <td>1</td> <td>1</td> </tr> <tr> <td>1</td> <td>1</td> <td>1</td> <td>1</td> <td>1</td> <td>1</td> <td>1</td> <td>1</td> </tr> <tr> <td>1</td> <td>1</td> <td>1</td> <td>1</td> <td>1</td> <td>1</td> <td>1</td> <td>1</td> </tr> <tr> <td>1</td> <td>1</td> <td>1</td> <td>1</td> <td>1</td> <td>1</td> <td>1</td> <td>1</td> </tr> <tr> <td>1</td> <td>1</td> <td>1</td> <td>1</td> <td>1</td> <td>1</td> <td>1</td> <td>1</td> </tr> </div> </div> </body> </html>
效果：
onresize事件：
function setTBodyHeight() { var t = document.getElementById('idTableBody'); var innerHeight = window.innerHeight; t.style.height = (innerHeight - 200) + "px"; // 减去200是去掉一个固定高度 } window.onload = function () { // 监听事件 window.onresize = setTBodyHeight; // 首次加载，由代码触发一次resize事件。 var ev = document.createEvent("Events"); ev.initEvent('resize', false, true); window.dispatchEvent(ev); };