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设置为the tr 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>

如何在保持桌头固定的同时滚动身体？

2 个答案: