思路就是
1,把tbody设置成display:block,而后就对其高度设置一个固定值,overflow设置成auto。
2,把thead的tr设置成display:block。
3,由于都设置成block因此要给td手动添加宽度 width:200px
亲测有效css
<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代码:html
.table thead tr { display:block; } .table tbody { display: block; height: 200px; overflow: auto; } .table th { width:20%; } .table td { width:20%; }
开源中国改版以后第一次写博客耶,新版本再熟悉中code