用css给tbody加垂直滚动条的具体思路及样式代码
用css给tbody加垂直滚动条的具体思路及样式代码
发布时间:2016-12-27 来源:查字典编辑
摘要:思路就是1,把tbody设置成display:block,然后就对其高度设置一个固定值,overflow设置成auto。2,把thead的t...

思路就是

1,把tbody设置成display:block,然后就对其高度设置一个固定值,overflow设置成auto。

2,把thead的tr设置成display:block。

3,因为都设置成block所以要给td手动添加宽度 width:200px

代码如下:

<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%;

}

推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
相关阅读
网友关注
最新 Div+Css教程学习
热门 Div+Css教程学习
网页设计子分类