快活林资源网 Design By www.csstdc.com
思路就是

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%;
}
快活林资源网 Design By www.csstdc.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
快活林资源网 Design By www.csstdc.com