动态表并保持顶部固定

Question

I have a dynamic table and I want to keep its head fixed when I scroll the table. The table is as follows.What this basically does is, javascript will use the number in the input field and create any number of rows as it includes.I have used a fixed height for the table.But when the table grows more than the height given then I have to scroll to go down.Then the thead also goes up and go invisible, so any method to fix the thead is appreciated.

Note : I have gone through almost all the stuff here related to the same topic, but it doesnot seem to work for me.

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

The CSS code I used is given below.

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

}

Answer 1

You can do this purly with css using position: sticky like the following. You can then change top to tell it how far it needs to be from the top to start becoming sticky.

A stickily positioned element is an element whose computed position value is sticky. It's treated as relatively positioned until its containing block crosses a specified threshold (such as setting top to value other than auto) within its flow root (or the container it scrolls within), at which point it is treated as "stuck" until meeting the opposite edge of its containing block.

 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>