用css 给tbody加垂直滚动条
思路就是
1,把tbody设置成display:block,然后就对其高度设置一个固定值,overflow设置成auto。
2,把thead的tr设置成display:block。
3,因为都设置成block所以要给td手动添加宽度 width:200px
代码如下:
<table class="table"> <thead> <tr> <th>Id</th> <th>Name</th> <th>Category</th> <th>MonthAmount</th> <th>hasBackUp</th> <th>score</th> </tr> </thead> <tbody> <tr> <td>23</td> <td>South Bearing</td> <td>Glass/Material</td> <td>1234444</td> <td>TRUE</td> <td>3456.00</td> </tr> <tr> <td>23</td> <td>South Bearing</td> <td>Glass/Material</td> <td>1234444</td> <td>TRUE</td> <td>3456.00</td> </tr> <tr> <td>23</td> <td>South Bearing</td> <td>Glass/Material</td> <td>1234444</td> <td>TRUE</td> <td>3456.00</td> </tr> <tr> <td>23</td> <td>South Bearing</td> <td>Glass/Material</td> <td>1234444</td> <td>TRUE</td> <td>3456.00</td> </tr> <tr> <td>23</td> <td>South Bearing</td> <td>Glass/Material</td> <td>1234444</td> <td>TRUE</td> <td>3456.00</td> </tr> <tr> <td>23</td> <td>South Bearing</td> <td>Glass/Material</td> <td>1234444</td> <td>TRUE</td> <td>3456.00</td> </tr> <tr> <td>23</td> <td>South Bearing</td> <td>Glass/Material</td> <td>1234444</td> <td>TRUE</td> <td>3456.00</td> </tr> <tr> <td>23</td> <td>South Bearing</td> <td>Glass/Material</td> <td>1234444</td> <td>TRUE</td> <td>3456.00</td> </tr> <tr> <td>23</td> <td>South Bearing</td> <td>Glass/Material</td> <td>1234444</td> <td>TRUE</td> <td>3456.00</td> </tr> <tr> <td>23</td> <td>South Bearing</td> <td>Glass/Material</td> <td>1234444</td> <td>TRUE</td> <td>3456.00</td> </tr> <tr> <td>23</td> <td>South Bearing</td> <td>Glass/Material</td> <td>1234444</td> <td>TRUE</td> <td>3456.00</td> </tr> </tbody> </table>
css
.table thead tr { display:block; } .table tbody { display: block; height: 200px; overflow: auto; } .table th { width:20%; } .table td { width:20%; }
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。