如何在保持表头固定的同时滚动 tbody?

Question

我已经动态创建了引导表，并希望在保持头部固定的同时让我的身体可滚动，但我无法做到这一点。我想用 css 来做这件事。 由于我正在动态创建表，因此它与使用 html 创建表不同，因为我使用的是 jquery 。我想根据我的代码回答，因为我无法应用有关此类问题的其他答案。

这是表格内容较少的代码-

var table = $("<table class='table'>");
table.append($("<thead><tr><th scope='col'>col1</th><th scope='col'>col2</th><th scope='col'>col3</th><th scope='col'>col4</th><th scope='col'>col5</th></tr><thead/>"));
for (var j = 0; j < 2; j++) {
var row = $('<tbody><tr class="parent_row" >' + '<td>' + "1" + '</td>' + '<td>' + "2" + '</td>' + '<td>' + "3" + '</td>' + '<td>' + "" + '</td>' + '<td>' + "" + '</td></tr><tbody/>');
table.append(row);
//child row
for (var i = 0; i < 2; i++) {
var row = $('<tr style="display: none">' + '<td>' + "" + '</td>' + '<td>' + "" + '</td>' + '<td>' + "" + '</td>' + '<td>' + "4" + '</td>' + '<td>' + "5" + '</td></tr>');
table.append(row);
$("#table").html(table);
$("#table").show();
$('.parent_row').on("click", function(e) {
e.preventDefault();
$(this).closest('.parent_row').nextUntil('.parent_row').toggle();
})
}
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="table">
</table>

Answer 1

添加这些样式

#table {
/* position: relative; */
height: 100px; change height according to your need
overflow: scroll;
display: block;
}
#table .table>thead>tr>th {
vertical-align: bottom;
border-bottom: 2px solid #ddd;
position: -webkit-sticky;
position: sticky;
top: 0;
z-index: 5;
background: #fff;
}

工作片段

var table = $("<table class='table'>");
table.append($("<thead><tr><th scope='col'>col1</th><th scope='col'>col2</th><th scope='col'>col3</th><th scope='col'>col4</th><th scope='col'>col5</th></tr><thead/>"));
for (var j = 0; j < 2; j++) {
var row = $('<tbody><tr class="parent_row" >' + '<td>' + "1" + '</td>' + '<td>' + "2" + '</td>' + '<td>' + "3" + '</td>' + '<td>' + "" + '</td>' + '<td>' + "" + '</td></tr><tbody/>');
table.append(row);
//child row
for (var i = 0; i < 2; i++) {
var row = $('<tr style="display: none">' + '<td>' + "" + '</td>' + '<td>' + "" + '</td>' + '<td>' + "" + '</td>' + '<td>' + "4" + '</td>' + '<td>' + "5" + '</td></tr>');
table.append(row);
$("#table").html(table);
$("#table").show();
$('.parent_row').on("click", function(e) {
e.preventDefault();
$(this).closest('.parent_row').nextUntil('.parent_row').toggle();
})
}
}

#table {
/* position: relative; */
height: 100px; 
overflow: scroll;
display: block;
}
#table .table>thead>tr>th {
vertical-align: bottom;
border-bottom: 2px solid #ddd;
position: -webkit-sticky;
position: sticky;
top: 0;
z-index: 5;
background: #fff;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="table">
</table>

Answer 2

默认情况下，OveFlow 属性不适用于 tbody。为了实现该设置显示：块到正文，以便我们可以对其应用高度和溢出。然后将"显示：块"设置为"头 tr

"

tbody {
display:block;
overflow: auto;
height: 200px;
width: 100%;
}
thead tr {
display: block;
}

您可以在此处点击此链接