在表格中的tbody添加滚动条

我们在对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中。但是这样的话可能会造成，上下的表格不能完整的显示出来，我们可以采用将上下的宽度进行手动的设置，来实现这个效果。