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>

动态表格并固定Thead

1 个答案: