原声表格中将thead固定，tobody超出高度滚动，滚动条样式改变

css设置滚动条的样式

注意：滚动条设置的width、height，分别是对应纵向滚动条宽度、横向滚动条高度，无法修改纵向滚动条高度、横向滚动条宽度数值只介绍Google浏览器滚动条样式。

常用属性如下：

::-webkit-scrollbar	滚动条整体样式
::-webkit-scrollbar-button	一设置滚动条样式，滚动条两端的按钮图标就消失，但可以重新设置图片、新样式
::-webkit-scrollbar-track	外层轨道
::-webkit-scrollbar-track-piece	内层轨道，它会覆盖外层轨道 scrollbar-track 的样式
::-webkit-scrollbar-thumb ::-webkit-scrollbar-thumb:hover ::-webkit-scrollbar-thumb:vertical:hover ::-webkit-scrollbar-thumb:horizontal:hover	滑块滑块悬浮纵向滑块悬浮横向滑块悬浮
::-webkit-scrollbar-corner	边角，两个滚动条交汇处

html

 <div class="tableBox"><table><thead><tr><th>序号</th><th>姓名</th><th>专业</th><th>身份证号</th><th>联系电话</th><th>操作</th></tr></thead> <tbody><tr><td>1</td><td>胡彦斌</td><td>大数据管理、大数据研究</td><td>365598666659895968</td><td>15856936545</td><td>选择</td></tr><tr><td>2</td><td>陈涛</td><td>信息安全研究</td><td>365598666659895968</td><td>15856936545</td><td>选择</td></tr><tr><td>3</td><td>胡彦斌</td><td>大数据管理、大数据研究</td><td>365598666659895968</td><td>15856936545</td><td>选择</td></tr><tr><td>3</td><td>胡彦斌</td><td>大数据管理、大数据研究</td><td>365598666659895968</td><td>15856936545</td><td>选择</td></tr><tr><td>3</td><td>胡彦斌</td><td>大数据管理、大数据研究</td><td>365598666659895968</td><td>15856936545</td><td>选择</td></tr><tr><td>3</td><td>胡彦斌</td><td>大数据管理、大数据研究</td><td>365598666659895968</td><td>15856936545</td><td>选择</td></tr><tr><td>3</td><td>胡彦斌</td><td>大数据管理、大数据研究</td><td>365598666659895968</td><td>15856936545</td><td>选择</td></tr><tr><td>3</td><td>胡彦斌</td><td>大数据管理、大数据研究</td><td>365598666659895968</td><td>15856936545</td><td>选择</td></tr><tr><td>3</td><td>胡彦斌</td><td>大数据管理、大数据研究</td><td>365598666659895968</td><td>15856936545</td><td>选择</td></tr><tr><td>3</td><td>胡彦斌</td><td>大数据管理、大数据研究</td><td>365598666659895968</td><td>15856936545</td><td>选择</td></tr><tr><td>3</td><td>胡彦斌</td><td>大数据管理、大数据研究</td><td>365598666659895968</td><td>15856936545</td><td>选择</td></tr></tbody></table></div>

css

.PwindowMain .tableBox {width: 1150px;height: 480px;margin: auto;
}
.PwindowMain .tableBox table {width: 100%;border-spacing: 0;border-collapse: separate;/* border: 1px solid rgba(230,230,230,1); */
}.PwindowMain .tableBox table th,
td {border: 1px solid rgba(230, 230, 230, 1);
}.PwindowMain .tableBox table tr {height: 48px;
}.PwindowMain .tableBox table thead tr {background: #F9FCFE;
}.PwindowMain .tableBox table tr th {height: 48px;font-family: PingFangSC-Medium;font-size: 16px;color: #333333;letter-spacing: 0;text-align: center;font-weight: 500;
}.PwindowMain .tableBox table tbody tr td {font-family: PingFangSC-Regular;font-size: 16px;color: #333333;letter-spacing: 0;font-weight: 400;text-align: center;
}
/** 这里当tbody中的tr是2的倍数的时候给他背景色 **/
.PwindowMain .tableBox table tbody tr:nth-child(2n) {background: #F9FCFE;
}.PwindowMain .tableBox table tbody tr td:last-child {color: #3389E0;
}.PwindowMain .tableBox table tbody tr:hover {background: rgb(223, 224, 224, 0.6);
}
/** 设置tbody超出高度滚动 **/
.PwindowMain .tableBox table tbody {display: block;height: 432px;overflow-y: scroll;
}.PwindowMain .tableBox table thead,
.PwindowMain .tableBox table tbody tr {display: table;width: 100%;table-layout: fixed;/*重要  表格固定算法*/
}.PwindowMain .tableBox table thead {/*留出滚动条的位置*/width: calc(100% - 5px)
}/*设置滚动条的样式*/
.PwindowMain .tableBox table tbody::-webkit-scrollbar {/*滚动条整体样式*/width: 5px;/*高宽分别对应横竖滚动条的尺寸*/
}.PwindowMain .tableBox table tbody::-webkit-scrollbar-thumb {/*滚动条里面小方块*/border-radius: 10px;background-color: #7dafe4;
}.PwindowMain .tableBox table tbody::-webkit-scrollbar-track {/*滚动条里面轨道*/box-shadow: inset 0 0 5px rgba(29, 94, 164, 0.4);/* background: #ededed; */border-radius: 10px;}

效果：

注意：

td的text-overflow : ellipsis和overflow : hidden都会起作用，但是这里也有几个地方要注意：
text-overflow : ellipsis生效的前提是
overflow不为visible，最好是类似hidden的值
需要指定table的width
如果td的宽度加起来超过table的width，即使给table加上overflow:hidden，td也不会被隐藏。

原声表格中将thead固定，tobody超出高度滚动，滚动条样式改变相关推荐

原生table:表格table中thead固定，tbody超出高度出现滚动条
首先认识一下表格的table-layout属性 tableLayout 属性用来显示表格单元格.行.列的算法规则. tableLayout有如下三个值:auto fixed inherit 值描 ...
vue移动端表格，超出横向滚动，固定第一列
效果图 html结构表格数据对应渲染功能实现思路:其实看代码就能了解了,就很简单的用循环数组,然后把数组中的每一项对应放在一个位置就行了.这样循环几个,就有几列数据,后台传过来的数据就分成两个,一个 ...
不花一分钱让手机支持原声原唱
原声原唱是目前新手机的一大卖点,我的三星X199没有这个功能,但通过刷机,我让它拥有了这些功能,真是爽呆了,不花一分钱耶. 买手机之后不久就有了数据线,但一直只是通过它传一些20K以下的铃声.50K以 ...
table表格固定表头，内容滚动显示
目的:做一个table表格,实现固定标题行而内容可滚动 html部分代码如下: <!DOCTYPE html> <html><head><meta chars ...
跟郎朗媳妇有得一拼的AI，只看弹琴动作，完美复现原声 | CVPR 2020
金磊发自凹非寺量子位报道 | 公众号 QbitAI 见识过「听歌识曲」,体验过看弹奏动作识曲吗? 就像最近的一档综艺节目中,郎朗比划了几个弹钢琴的动作,他媳妇(吉娜·爱丽丝)秒答:<柴可 ...
还原时代原声，AI修复老北京再次火爆全网
点击上方"3D视觉工坊",选择"星标" 干货第一时间送达凭借AI修复老北京影像火爆B站的Up主大谷兄,今天又来带我们玩穿越了! 这次是1929年的老北京,除了 ...
AI技术重现的老北京原声影像又火了，网友：这口音太过真实
来源:机器之心本文约1700字,建议阅读7分钟. "大谷的游戏创作小屋"又用AI修复了一段老北京影像,这次还带时代原声-- 剃头挑子.街边地摊.京韵大鼓,多数人可能只在电影.电视 ...
动人配乐是如何炼成的？带您了解《花之灵》背景原声的幕后制作秘辛
<花之灵>(Hoa)现已于杉果游戏商城及Steam平台正式发售,游戏发售首日便拿下了新品与热门商品销量榜第一名.92%特别好评的优秀成绩.玩家们除了盛赞本作出色画面外,也对游戏中对情绪渲染 ...
one more step_KDA新歌《MORE》的一些冷知识：伊芙琳换回原声，摩托车是定制的
原标题:KDA新歌<MORE>的一些冷知识:伊芙琳换回原声,摩托车是定制的 KDA女团在2020年宣布回归后就引发了很多的关注,回归后也是推出了首支单曲<THE BADDEST> ...

原声表格中将thead固定，tobody超出高度滚动，滚动条样式改变

原声表格中将thead固定，tobody超出高度滚动，滚动条样式改变相关推荐

最新文章

热门文章