css部分:
.table{
width: 100%;
}
.content {
width: 434px;
height: 182px;
outline: 1px solid #e5e5e5;
overflow: hidden;
}
.data-content tr:nth-child(odd){
background-color: #f6fafd;
}
.data-content tr:nth-child(even){
background-color: #ffffff;
}
.data {
height: 180px;
overflow: hidden;
}
.header {
line-height: 30px;
padding-left: 16px;
padding-right: 16px;
background-color: #e9eef4;
display: flex;
justify-content: space-between;
}
.rows{
padding: 0;
height: 38px;
text-align: center;
line-height: 38px;
}
.table tbody tr{
width: 100%;
display: flex;
flex-direction: row;
justify-content: space-between;
}
js部分:
let html = '';
for (let i = 0; i < 15; i++) {
html += "
";html += `
${i + 1}`;html += "
组织名称"html += "
1234";html += "
";}
$('.table').html(html);
$('table td').addClass('rows');
let dataDOM = $('.data')[0];
let dataContentDOM = $('.data-content')[0];
let dataFooterDOM = $('.data-footer')[0];
let height = dataDOM.offsetTop + dataDOM.offsetHeight;
setInterval(function () {
// 887-0-579
if (dataFooterDOM.offsetTop - dataDOM.scrollTop - height <= 0) {
dataDOM.scrollTop -= dataContentDOM.offsetHeight;
} else {
dataDOM.scrollTop++;
}
}, 30);
标签:表格,dataDOM,表头,height,content,html,let,js,data
来源: https://blog.csdn.net/qq_42975998/article/details/88252668