我们在对table进行操作的时候，往往有一个这样的诉求，我们需要向表格中添加滚动条，这个滚动条仅仅对于tbody生效，也就是当滚动条滑动的时候，表头是不滚动的，给出一个效果图：
向tabody中添加滚动条
代码实现：
<div>
<table border="1px soild black" style="width: 100%;">
<thead >
<tr>
<th>name</th>
<th>name</th>
<th>name</th>
</tr>
</thead>
</table>
</div>
<div style="max-height: 100px; overflow-y: scroll">
<table border="1px soild black" style="width: 100%;">
<tbody>
<!--<div style="height: 100px;">-->
<tr>
<td>kim</td>
<td>kim</td>
<td>kim</td>
</tr>
<tr>
<td>kim</td>
<td>kim</td>
<td>kim</td>
</tr>
<tr>
<td>kim</td>
<td>kim</td>
<td>kim</td>
</tr>
<tr>
<td>kim</td>
<td>kim</td>
<td>kim</td>
</tr>
<tr>
<td>kim</td>
<td>kim</td>
<td>kim</td>
</tr>
<tr>
<td>kim</td>
<td>kim</td>
<td>kim</td>
</tr>
<tr>
<td>kim</td>
<td>kim</td>
<td>kim</td>
</tr>
<tr>
<td>kim</td>
<td>kim</td>
<td>kim</td>
</tr>
</tbody>
</table>
</div>
</body>
其中style="max-height: 100px; overflow-y: scroll"是这段代码的关键，设置了最大的高度是100px，当内容超过这个高度的时候，就会出现竖直方向的滚动条。
提问：为什么在在tbody里面直接设置高度不生效？
<!--不生效-->
<tbody style:"height:100px"> </tbody>
在使用tbody标签的时候，会默认使用 display: table-row-group属性，这个属性导致对于宽度和高度的设置是自适应当前屏幕的，所以再设置宽度和高度的时候，就不会生效，我的解决方案就是：将这个表格拆分放在两个div中。但是这样的话可能会造成，上下的表格不能完整的显示出来，我们可以采用将上下的宽度进行手动的设置，来实现这个效果。
