自定义滚动条、tbody加滚动条

tbody加滚动条实现思路：

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

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

3.因为都设置成block所以要给td手动添加宽度。

4.考虑到 tbody 产生了滚动条，这时会影响tbody以及thead的宽度，可以采用针对tbody设置::-webkit-scrollbar进行解决。

自定义滚动条：

/*定义滚动条高宽及背景高宽分别对应横竖滚动条的尺寸*/

::-webkit-scrollbar {

width: 6px;

height: 6px;

}

/*定义滚动条轨道内阴影+圆角*/

::-webkit-scrollbar-thumb {

/* 滚动条拖动条 */

background: linear-gradient(70deg, #8ecaeb 0%, #1585c2 50%, #3574c7 100%);

border-radius: 6px;

}

::-webkit-scrollbar-track {

/* 滚动条背景槽 */

background-color: #90d1f1;

border-radius: 6px;

}

自定义滚动条、tbody加滚动条相关推荐

element table滚动条占宽度_HTML table表格固定表头 tbody加滚动条
纯CSS table表格 thead固定 tbody滚动效果由于项目需要,在表格中,当数据量越来越多时,就会出现滚动条,而在滚动的过程中,默认情况下表格头部会跟着表格内容一起滚动,导致看不到头部对应 ...
表格固定表头，tbody加滚动条
实现表头固定,tbody加上滚动条.有一种解决方法将分为两个表格来做:一部分是thead,一部分是tbody,放thead的表格绝对定位在父元素,放tbody的表格加上滚动条.当需调横向滚动条时,需要 ...
HTML table表格固定表头 tbody加滚动条
纯CSS table表格 thead固定 tbody滚动效果由于项目需要,在表格中,当数据量越来越多时,就会出现滚动条,而在滚动的过程中,默认情况下表格头部会跟着表格内容一起滚动,导致看不到头部对应 ...
html 滚动条_HTML table表格固定表头 tbody加滚动条
纯CSS table表格 thead固定 tbody滚动效果由于项目需要,在表格中,当数据量越来越多时,就会出现滚动条,而在滚动的过程中,默认情况下表格头部会跟着表格内容一起滚动,导致看不到头部对应 ...
iframe 滚动条不显示_HTML table表格固定表头 tbody加滚动条
纯CSS table表格 thead固定 tbody滚动效果由于项目需要,在表格中,当数据量越来越多时,就会出现滚动条,而在滚动的过程中,默认情况下表格头部会跟着表格内容一起滚动,导致看不到头部对应 ...
table表格加滚动条
<HTML><HEAD><TITLE>table表格加滚动条</TITLE> <META http-equiv=Content-Type cont ...
html加纵向滚动条,添纵向滚动条
当前位置:我的异常网» Web前端 » 添纵向滚动条添纵向滚动条 www.myexceptions.net 网友分享于:2013-11-24 浏览:82次加纵向滚动条 version 1 My ...
java给界面添加滚动条_Java Swing学习笔记：要求会默写或熟练的，GUI，控件，设置列或行，加滚动条，新界面...
GUI:Java的图形化用户界面学习其控件的使用 JLabel(文本控件),JTextField(文本框),JPassworldField(密码框),JButton(普通按钮) JRadioButt ...
js怎么给div加滑动条 vue给弹出层加滑动条(一分钟学会用js加滚动条)
@[TOC](怎么给div加滑动条给弹出层加滑动条(一分钟学会js加滚动条)) 给div加滑动条给需要滑动条的div加一个样式加一个高度,加一个overflow:auto; overflow:a ...
css自定义横向滚动条样式,css滚动条样式自定义
很简单的几行代码 Title * { margin: 0; padding: 0; } .out { width: 600px; height: 600px; margin: 100px auto; ...

自定义滚动条、tbody加滚动条

tbody加滚动条实现思路：

自定义滚动条：

自定义滚动条、tbody加滚动条相关推荐

最新文章

热门文章