Javascript 动态表格，并保持THAD固定

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

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

HTML

---

}

您可以像下面这样使用css来实现这一点。然后，您可以更改

top

，告诉它需要离顶部多远才能开始变粘

粘性定位图元是指其计算位置值为粘性的图元。它被视为相对定位，直到它的包含块在其流根（或它在其中滚动的容器）内超过指定的阈值（例如将top设置为value而不是auto），在这一点上它被视为“卡住”，直到遇到它的包含块的相对边为止

thead>tr>th{
位置：粘性；
排名：0；
背景：白色；
}
表{宽度：100%；}

索引号
纠正
不正确的
总数A
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试

它完成了这项工作，但它使头部透明。我确定，仅使用一些基本的CSW，这是AD>tr>的意思，

意味着下一项必须是直接子项。因此

tr

必须是

thead

的直接子级，

th

必须是

tr

的直接子级。

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

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');
    }
}
};

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