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也不会被隐藏。
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
文章由极客之家整理,本文链接:https://www.bmabk.com/index.php/post/79807.html