目的：做一个table表格，实现固定标题行而内容可滚动
html部分代码如下：
<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><link rel="stylesheet" type="text/css" href="css/bootstrap.css" /></head><body><div class="conatiner table-responsive"><!-- table-striped使得奇数行的背景色变为灰色 --><table class="table table-striped hx-table-fixed-title"><thead class="hx-table-fixedThead"><tr><th><input type="checkbox" name="" id="" value="" class="table-input-box"/></th><th>车牌号</th><th>订阅起订时间</th><th>订阅结束时间</th><th>订阅类型(最近一次)</th></tr></thead><tbody class="hx-table-scrollTbody"><tr><td><input type="checkbox" name="" id="" value="" class="table-input-box"/></td><td>张三</td><td>-03-01 16:00:13</td><td>-03-01 16:00:13</td><td>包月</td></tr><tr><td><input type="checkbox" name="" id="" value="" class="table-input-box"/></td><td>张三</td><td>-03-01 16:00:13</td><td>-03-01 16:00:13</td><td>包月</td></tr><tr><td><input type="checkbox" name="" id="" value="" class="table-input-box"/></td><td>张三</td><td>-03-01 16:00:13</td><td>-03-01 16:00:13</td><td>包月</td></tr><tr><td><input type="checkbox" name="" id="" value="" class="table-input-box"/></td><td>张三</td><td>-03-01 16:00:13</td><td>-03-01 16:00:13</td><td>包月</td></tr><tr><td><input type="checkbox" name="" id="" value="" class="table-input-box"/></td><td>张三</td><td>-03-01 16:00:13</td><td>-03-01 16:00:13</td><td>包月</td></tr><tr><td><input type="checkbox" name="" id="" value="" class="table-input-box"/></td><td>张三</td><td>-03-01 16:00:13</td><td>-03-01 16:00:13</td><td>包月</td></tr><tr><td><input type="checkbox" name="" id="" value="" class="table-input-box"/></td><td>张三</td><td>-03-01 16:00:13</td><td>-03-01 16:00:13</td><td>包月</td></tr><tr><td><input type="checkbox" name="" id="" value="" class="table-input-box"/></td><td>张三</td><td>-03-01 16:00:13</td><td>-03-01 16:00:13</td><td>包月</td></tr><tr><td><input type="checkbox" name="" id="" value="" class="table-input-box"/></td><td>张三</td><td>-03-01 16:00:13</td><td>-03-01 16:00:13</td><td>包月</td></tr><tr><td><input type="checkbox" name="" id="" value="" class="table-input-box"/></td><td>张三</td><td>-03-01 16:00:13</td><td>-03-01 16:00:13</td><td>包月</td></tr></tbody></table></div></body><script src="/jquery/2.1.4/jquery.min.js"></script><script type="text/javascript" src="js/bootstrap.js"></script></html>
css部分代码如下所示：
.hx-table-fixed-title {width: 800px;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);border-collapse: collapse;border-spacing: 0;}.hx-table-fixedThead{display: block;width: 100%;}.hx-table-scrollTbody {display: block;max-height: 350px;overflow: auto;width: 100%;border: 1px solid #DDDDDD;}.hx-table-fixed-title td,.hx-table-fixed-title th {text-align: center;padding: 2px 3px 3px 4px;}.hx-table-fixed-title tr {border: 1px solid #cccccc;}.hx-table-fixed-title tbody tr{border-left: none;}.hx-table-fixedThead tr th:last-child {width: 218px;}.hx-table-fixed-title tbody tr td:not(:first-child){text-align: center;width: 200px;}.hx-table-fixed-title thead tr th:not(:first-child){text-align: center;width: 200px;}.hx-table-fixed-title .table-input-box{width: 14px;height: 14px;border-radius:2px;background-color:none;border: 1px solid #2DA7E0;zoom: 1;outline: none;-webkit-appearance:none;/*去除默认样式*/-webkit-appearance:none;-moz-appearance:none;-o-appearance:none;-ms-appearance:none;}.hx-table-fixed-title .table-input-box:checked{background:#2ea7e0 ;}.hx-table-fixed-title tbody tr td:last-of-type{color: #2ea7e0;}
注意：margin: 0 auto;也能使某个块级元素在页面居中显示
最终效果如图所示：
