手机
当前位置:查字典教程网 >网页设计 > Div+Css教程 >用css给tbody加垂直滚动条的具体思路及样式代码
用css给tbody加垂直滚动条的具体思路及样式代码
摘要:思路就是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%;

}

【用css给tbody加垂直滚动条的具体思路及样式代码】相关文章:

css的字体属性详解

css实现body背景图片水平垂直居中方法

CSS里随滚动条滚动代码

CSS3制作loading加载动画效果代码

css美化Div边框的样式实例

css3实现input输入框颜色渐变发光效果代码

通过css加载远程字体示例代码

DIV滚动条属性

css自动换行的技巧

div+css垂直居中的五种实现方法

精品推荐
分类导航