css设置滚动条的样式
注意：滚动条设置的width、height，分别是对应纵向滚动条 宽度、横向滚动条 高度，无法修改纵向滚动条高度、横向滚动条宽度数值只介绍Google浏览器滚动条样式。
常用属性如下：
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也不会被隐藏。
