思路就是
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%; }