动态表并保持头部固定

Question

我有一个动态表格，我希望在滚动表格时保持其头部固定。 表格如下。这基本上做的是，javascript将使用输入字段中的数字并创建包含的任意数量的行。我为表格使用了固定高度。但是当表格增长超过高度时给定然后我必须向下滚动。然后，thead 也会上升并变得不可见，因此任何修复 thead 的方法都值得赞赏。

注意：我已经阅读了这里几乎所有与同一主题相关的内容，但它似乎对我不起作用。

HTML

<div class="container-fluid"" style="width: 90%" style="height: 90%">
  <table id="tableAddResults" class="table table-hover" cellspacing="0">
    <thead>
      <tr>
        <th scope="col">Index No</th>
        <th scope="col">Correct A</th>
        <th scope="col">Incorrect A</th>
        <th scope="col">Total A</th>
      </tr>
    </thead>
    <tbody>
    </tbody>
  </table>

JAVASCRIPT

function addRow(){

var rowcount = document.getElementById('rowcount').value;
var table = document.getElementById('tableAddResults');

for(y=0;y<rowcount;y++){
    var newrow = table.insertRow();

    var cell0 = newrow.insertCell(0);
    var cell0Text = document.createTextNode('AT-');
    cell0.appendChild(cell0Text);
    cell0.setAttribute('contentEditable','true');

    for(i=1;i<4;i++){
        var cell = newrow.insertCell(i);
        var cellText = document.createTextNode('');
        cell.appendChild(cellText);
        cell.setAttribute('contentEditable','true');
    }
}
};

我使用的 CSS 代码如下。

div.container-fluid{
   overflow:hidden;
   overflow-y: scroll;
   height: 450px;

}

Answer 1

您可以使用 position: sticky 使用 css 完成此操作，如下所示。然后，您可以更改 top 以告诉它需要离顶部多远才能开始变得粘滞。

粘性定位元素是其计算位置值为粘性的元素。它被视为相对定位，直到其包含块在其流根（或其滚动的容器）内超过指定阈值（例如将 top 设置为 auto 以外的值），此时它被视为“卡住”，直到满足其包含块的相对边缘。

thead > tr > th {
  position: sticky;
  top: 0;
  background: white;
}


table {width: 100%;}

<div class="container-fluid" style="width: 90%" style="height: 90%">
  <table id="tableAddResults" class="table table-hover" cellspacing="0">
    <thead>
      <tr>
        <th scope="col">Index No</th>
        <th scope="col">Correct A</th>
        <th scope="col">Incorrect A</th>
        <th scope="col">Total A</th>
      </tr>
    </thead>
    <tbody>
      <tr><td>test</td><td>test</td><td>test</td><td>test</td></tr>
      <tr><td>test</td><td>test</td><td>test</td><td>test</td></tr>
      <tr><td>test</td><td>test</td><td>test</td><td>test</td></tr>
      <tr><td>test</td><td>test</td><td>test</td><td>test</td></tr>
      <tr><td>test</td><td>test</td><td>test</td><td>test</td></tr>
      <tr><td>test</td><td>test</td><td>test</td><td>test</td></tr>
      <tr><td>test</td><td>test</td><td>test</td><td>test</td></tr>
      <tr><td>test</td><td>test</td><td>test</td><td>test</td></tr>
      <tr><td>test</td><td>test</td><td>test</td><td>test</td></tr>
      <tr><td>test</td><td>test</td><td>test</td><td>test</td></tr>
      <tr><td>test</td><td>test</td><td>test</td><td>test</td></tr>
      <tr><td>test</td><td>test</td><td>test</td><td>test</td></tr>
      <tr><td>test</td><td>test</td><td>test</td><td>test</td></tr>
      <tr><td>test</td><td>test</td><td>test</td><td>test</td></tr>
      <tr><td>test</td><td>test</td><td>test</td><td>test</td></tr>
      <tr><td>test</td><td>test</td><td>test</td><td>test</td></tr>
      <tr><td>test</td><td>test</td><td>test</td><td>test</td></tr>
      <tr><td>test</td><td>test</td><td>test</td><td>test</td></tr>
      <tr><td>test</td><td>test</td><td>test</td><td>test</td></tr>
      <tr><td>test</td><td>test</td><td>test</td><td>test</td></tr>
      <tr><td>test</td><td>test</td><td>test</td><td>test</td></tr>
      <tr><td>test</td><td>test</td><td>test</td><td>test</td></tr>
      <tr><td>test</td><td>test</td><td>test</td><td>test</td></tr>
      <tr><td>test</td><td>test</td><td>test</td><td>test</td></tr>
      <tr><td>test</td><td>test</td><td>test</td><td>test</td></tr>
    </tbody>
  </table>
</div>