个人笔记:兼容IE10、11/firefox/chrome
.table1{
position:absolute;
display: block;
height: 48%;
border-collapse:collapse;
padding-top: 52px;
font-size: 18px;
/* border: 1px solid green; */
}
.table1>thead{position: absolute;top: 0;}
.table1>thead>tr>th{table-layout:fixed;}
.table1>tbody{display: block;height:100%;overflow-y: scroll;overflow-x: hidden;}
th, td{border: 1px solid green;width: 300px; height: 50px;text-align: center;}
/*.table1>thead>tr:first-child>th{border-top: 0;}*/
/* .table1>thead>tr>th:last-child{border-right: 0;width: 15px; border-left: 0;}
.table1>thead>tr>th:nth-last-child(2){border-right: 0;}
.table1>thead>tr>th:first-child{border-left: 0;}
.table1>tbody>tr>td:first-child{border-left: 0;}
.table1>tbody>tr>td:last-child{border-right: 0;} */
213 | 123 | 123 |
---|---|---|
TD第一行 | TD第一行第二列 | TD第一行第3列 |
我是td啊啊啊 | 我是td啊啊啊 | |
我是td啊啊啊 | 我是td啊啊啊 | |
我是td啊啊啊 | 我是td啊啊啊 | |
我是td啊啊啊 | 我是td啊啊啊 | |
我是td啊啊啊 | 我是td啊啊啊 | |
我是td啊啊啊 | 我是td啊啊啊 | |
我是td啊啊啊 | 我是td啊啊啊 | |
我是td啊啊啊 | 我是td啊啊啊 | |
我是td啊啊啊 | 我是td啊啊啊 | |
我是td啊啊啊 | 我是td啊啊啊 | |
我是td啊啊啊 | 我是td啊啊啊 | |
我是td啊啊啊 | 我是td啊啊啊 | |
我是td啊啊啊 | 我是td啊啊啊 | |
我是td啊啊啊 | 我是td啊啊啊 | |
我是td啊啊啊 | 我是td啊啊啊 |
效果如下:
问题1.滚动条在tbody外侧
将注释代码打开后效果,如下:
.table1{
position:absolute;
display: block;
height: 48%;
border-collapse:collapse;
padding-top: 52px;
font-size: 18px;
border: 1px solid green;
}
.table1>thead{position: absolute;top: 0;}
.table1>thead>tr>th{table-layout:fixed;}
.table1>tbody{display: block;height:100%;overflow-y: scroll;overflow-x: hidden;}
th, td{border: 1px solid green;width: 300px; height: 50px;text-align: center;}
.table1>thead>tr:first-child>th{border-top: 0;}
.table1>thead>tr>th:last-child{border-right: 0;}
/*.table1>thead>tr>th:last-child{border-right: 0;width: 15px; border-left: 0;}*/
/*.table1>thead>tr>th:nth-last-child(2){border-right: 0;}*/
/*去除双边框*/
.table1>thead>tr>th:first-child{border-left: 0;}
.table1>tbody>tr>td:first-child{border-left: 0;}
.table1>tbody>tr>td:last-child{border-right: 0;}
/*chrome自定义滚动条--start*/
.my-scroll::-webkit-scrollbar {width:0.5rem;}
.my-scroll::-webkit-scrollbar-button{background-color: green; height: 1px; }
.my-scroll::-webkit-scrollbar-track{background: rgba(255,255,255,0.2); }
.my-scroll::-webkit-scrollbar-thumb{background:rgb(121, 120, 120); border-radius:10px;height: 20%; }
.my-scroll-null-th{width: 0.1rem;}
/*chrome自定义滚动条--end*/
213 123 123
效果如下:
滚动条样式修改只支持chrome,ie不支持,详细信息参考:
另:jQuery滚动条插件jquery.mCustomScrollbar各种样式的滚动条