您现在的位置是：网站首页> 编程资料编程资料

用css给tbody加垂直滚动条的具体思路及样式代码详解css3自定义滚动条样式写法CSS3自定义滚动条样式的示例代码纯CSS改变webkit内核浏览器的滚动条样式CSS样式设置div滚动条示例代码css使用overflow属性控制滚动条的样式div css 滚动条样式 DIV滚动条属性及样式设置方式css设置滚动条颜色与样式以及如何去掉与隐藏滚动条CSS 设置滚动条样式的实例代码

2021-09-06 1040人已围观

简介给tbody加垂直滚动条的思路就是把tbody设置成display:block，然后就对其高度设置一个固定值，overflow设置成auto即可，下面有个不错的示例，大家可以参考下

思路就是

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

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

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

代码如下：

复制代码

代码如下:

Id	Name	Category	MonthAmount	hasBackUp	score
23	South Bearing	Glass/Material	1234444	TRUE	3456.00
23	South Bearing	Glass/Material	1234444	TRUE	3456.00
23	South Bearing	Glass/Material	1234444	TRUE	3456.00
23	South Bearing	Glass/Material	1234444	TRUE	3456.00
23	South Bearing	Glass/Material	1234444	TRUE	3456.00
23	South Bearing	Glass/Material	1234444	TRUE	3456.00
23	South Bearing	Glass/Material	1234444	TRUE	3456.00
23	South Bearing	Glass/Material	1234444	TRUE	3456.00
23	South Bearing	Glass/Material	1234444	TRUE	3456.00
23	South Bearing	Glass/Material	1234444	TRUE	3456.00
23	South Bearing	Glass/Material	1234444	TRUE	3456.00

css

复制代码

代码如下:

.table thead tr {
display:block;
}
.table tbody {
display: block;
height: 200px;
overflow: auto;
}
.table th {
width:20%;
}
.table td {
width:20%;
}