thead 固定，tbody 超出滚动条

参考：博客园 zeroz
https://www.cnblogs.com/zerozq/p/9138320.html

table tbody {max-height: 500px;display: block;overflow-y: auto;
}
table thead, table tbody tr {width: 100%;display: table;table-layout: fixed;
}
table thead {width: calc(100% - 3px); /*减去默认滚动条的宽度，让thead 与tbody 对齐*/
}
table tbody::-webkit-scrollbar { width: 3px;}  /*设置滚动条的宽度，让thead 与tbody 对齐*//*改变滚动条的宽度和样式*/
table tbody::-webkit-scrollbar { width: 3px;}
table tbody::-webkit-scrollbar-track{background-color:#f0f0f0；}
table tbody::-webkit-scrollbar-thumb{background-color:#CCCCCC;}
table tbody::-webkit-scrollbar-thumb:hover {background-color:#CCCCCC；}
table tbody::-webkit-scrollbar-thumb:active {background-color:#CCCCCC；}

效果：
使用前：

使用后：

thead 固定，tbody 超出滚动条相关推荐

table thead 固定 tbody滚动
一种简单的方法实现支持多行th <!DOCTYPE html> <html><head><meta charset="UTF-8"> ...
element table滚动条占宽度_HTML table表格固定表头 tbody加滚动条
纯CSS table表格 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:表格table中thead固定，tbody超出高度出现滚动条
首先认识一下表格的table-layout属性 tableLayout 属性用来显示表格单元格.行.列的算法规则. tableLayout有如下三个值:auto fixed inherit 值描 ...
原声表格中将thead固定，tobody超出高度滚动，滚动条样式改变
css设置滚动条的样式注意:滚动条设置的width.height,分别是对应纵向滚动条宽度.横向滚动条高度,无法修改纵向滚动条高度.横向滚动条宽度数值只介绍Google浏览器滚动条样式. 常用属 ...
表格固定表头，tbody加滚动条
实现表头固定,tbody加上滚动条.有一种解决方法将分为两个表格来做:一部分是thead,一部分是tbody,放thead的表格绝对定位在父元素,放tbody的表格加上滚动条.当需调横向滚动条时,需要 ...
纯css固定tbody高度，超出滚动效果
<!DOCTYPE HTML> <html><head><meta http-equiv="Content-Type" content=& ...

thead 固定，tbody 超出滚动条

thead 固定，tbody 超出滚动条相关推荐

最新文章

热门文章