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

Question

我已经动态创建了引导表，并希望在保持头部固定的同时让我的 tbody 可滚动，但我无法做到。我想用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

默认情况下，oveflow 属性不适用于 tbody。为了实现将 display:block 设置为 tbody 以便我们可以对其应用高度和溢出。然后将 display:block 设置为 thead tr

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

thead tr {
display: block;
}

您可以点击此链接here

Answer 2

添加这些样式

#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>