我們在對table進(jìn)行操作的時候怔昨，往往有一個這樣的訴求雀久，我們需要向表格中添加滾動條，這個滾動條僅僅對于tbody生效趁舀，也就是當(dāng)滾動條滑動的時候赖捌，表頭是不滾動的，給出一個效果圖：
向tabody中添加滾動條
代碼實(shí)現(xiàn)：
<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"是這段代碼的關(guān)鍵矮烹，設(shè)置了最大的高度是100px越庇，當(dāng)內(nèi)容超過這個高度的時候，就會出現(xiàn)豎直方向的滾動條奉狈。
提問：為什么在在tbody里面直接設(shè)置高度不生效卤唉？
<!--不生效-->
<tbody style:"height:100px"> </tbody>
在使用tbody標(biāo)簽的時候，會默認(rèn)使用 display: table-row-group屬性仁期，這個屬性導(dǎo)致對于寬度和高度的設(shè)置是自適應(yīng)當(dāng)前屏幕的桑驱，所以再設(shè)置寬度和高度的時候，就不會生效跛蛋，我的解決方案就是：將這個表格拆分放在兩個div中熬的。但是這樣的話可能會造成，上下的表格不能完整的顯示出來赊级，我們可以采用將上下的寬度進(jìn)行手動的設(shè)置押框，來實(shí)現(xiàn)這個效果。
