CSS打造固定表头
html代码：
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <link rel="stylesheet" href="css/test.css"> <title>表头固定内容滚动</title> </head> <body> <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> <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> <label>可滚动表格——表格宽度自动，列宽度固定设置<col></label> <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> </body> </html>
CSS代码：
@charset "utf-8"; .tableWrap{ width:600px; box-sizing: border-box; } .table-thead{ width:auto; font-size: 14px; background-color: #FFF; border: 1px solid #CFCFCF; border-collapse: collapse; border-spacing: 0px; } .table-thead tr th{ text-align: left; padding-left:10px; border-right:1px solid #CFCFCF; } .table-thead tr th:last-child, .table-thead tr th:nth-last-child(2){ border-right:0; } .table-thead tr, .table-tbody tr{ height:35px; } .table-tbody{ width:auto; font-size: 14px; background-color: #FFF; border-left:1px solid #CFCFCF; border-collapse: collapse; border-spacing: 0px; } .table-tbody tr{ border-bottom:1px solid #CFCFCF; } .table-tbody tr:last-child{ border-bottom: 0; } .table-tbody tr td{ padding-left:10px; padding-right:10px; border-right:1px solid #CFCFCF; } .comTbody{ width:auto; display: inline-block; max-height:100px; overflow-y: scroll; border-bottom: 1px solid #CFCFCF; } .table-wrap{ width:550px; outline: none; position: relative; font-size: 14px; color:#444; border: 1px #e6e6e6 solid; margin-bottom: 30px; } .table-head{ padding-right:17px; background-color: #FAFAFA; border-bottom: 1px #e6e6e6 solid; } .table-head-wrap{ width:100%; position: relative; overflow: hidden; } .grid{ margin: 0px; table-layout: fixed; width: 100%; max-width: none; border-spacing: 0px; empty-cells: show; border-width: 0px; outline: 0px none; border-collapse: collapse; } .grid tr th{ padding: 0.929em 0.5em; vertical-align: bottom; overflow: hidden; border-left: 1px #e6e6e6 solid; font-weight: normal; white-space: nowrap; text-overflow: ellipsis; text-align: left; } .grid tr th:first-child{ border-left-width: 0; } .grid tr td{ border-left: 1px #e6e6e6 solid; border-bottom: 1px #e6e6e6 solid; padding: 0.929em 0.5em; overflow: hidden; line-height: 1.6em; vertical-align: middle; text-overflow: ellipsis; } .grid tr td:first-child{ border-left-width: 0px; } .grid tr:last-child td{ border-bottom: none; } .tab-link{ display: block; min-height: 18px; line-height: 18px; overflow: hidden; text-overflow: ellipsis; } .table-content{ height:221px; white-space: normal; position: relative; width: 100%; overflow-x: auto; overflow-y: scroll; min-height: 0; } .data-grid{ width: 698px; height: 201px; position: relative; overflow: hidden; font-size: 14px; color:#444; box-sizing: border-box; border-color: #95B8E7; border-width: 1px; border-style: solid; } .data-view{ width: 698px; position: absolute; overflow: hidden; top: 0px; right: 0px; } .grid-head{ width: 698px; height: 30px; border-color: #DDD; overflow: hidden; cursor: default; border-width: 0px 0px 1px; border-style: solid; background-color:#efefef; } .grid-head-inner{ display: block; float: left; } .data-table{ height: 30px; border-collapse: separate; } .data-table-row{ height: 30px; } .data-table td{ border-color: #CCC; border-width: 0px 1px 1px 0px; border-style: dotted; margin: 0px; padding: 0px; line-height: 1.65em; } .datagrid-cell{ margin: 0px; padding: 0px 4px; white-space: nowrap; word-wrap: normal; overflow: hidden; height: 18px; line-height: 18px; font-size: 12px; } .cell-c1{ width:79px; height:auto; } .cell-c2{ width:99px; height:auto; } .cell-c3{ width:85px; height:auto; text-align: right; } .cell-c4{ width:100px; height:auto; text-align: right; } .cell-c5{ width:200px; height:auto; } .grid-body{ width: 698px; height: 168px; overflow-x: hidden; margin: 0px; padding: 0px; } .datagrid-btable{ border-collapse: separate; } .datagrid-btable tr{ height:25px; } .datagrid-btable tr td{ border-color: #CCC; border-width: 0px 1px 1px 0px; border-style: dotted; margin: 0px; padding: 0px; }
