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