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;}CSS打造固定表头
原文地址：https://www.cnblogs.com/leijing0607/p/8376465.html