上网试过了很多方法，我总结了一下是以下两种：
法一：用 table 内部属性 thead tbody tfoot
法二：用两个 table 标签
各取所长，整理出一个近乎完美的方法。
html:
<div style="width: 800px;">
<div class="table-head">
<table>
<colgroup>
<col style="width: 40px;"/><col/>
</colgroup>
<thead>
<tr><th>序号</th><th>内容</th><th>内容内容内容</th></tr>
</thead>
</table>
</div>
<div class="table-body">
<table>
<colgroup>
<col style="width: 40px;" /><col />
</colgroup>
<tbody>
<tr><td>1</td><td>我只是用来测试的</td><td>我只是用来测试的</td></tr>
</tbody>
</table>
</div>
</div>
css:
table{border-collapse: collapse;table-layout:fixed}
table tr td{border:1px solid #999}
table tr th{border:1px solid #999}
.table-head{background-color:#ddd;color:#000;padding-right:17px;}
.table-body{width:100%; height:300px;overflow-y:scroll;}
.table-head table,.table-body table{width:100%;}
实现结果图
但当数据少的时候 旁边的滚动条会始终存在
image.png
