在可滚动的 div 中固定标题

Question

I have a bootstrap table with in a scrollable div. Wrapping table with in div help me fix my th and td alignment issues but with this my table headers also scroll and I want them to be fixed.

  <div class="table-wrapper">
                            <table class="table" id="tblfiles">
                                <thead>
                                    <tr>
                                        <th data-field="Date" class="col-md-2" style="width:100vw;">Alert Date</th>
                                        <th data-field="Files" class="col-md-2" style="width:100vw;">Files</th>
                                        <th data-field="fileName" class="col-md-2" style="width:100vw;">Received Time</th>
                                        <th data-field="ReceivedTime" class="col-md-2" style="width:100vw;">Received Time</th>
                                        <th data-field="Delete" class="col-md-1" style="width:100vw;"></th>
                                    </tr>
                                </thead>
                                <tbody id="tblBodyFiles">
                                </tbody>
                            </table>
                            </div>

CSS

.table-wrapper {
max-height: 200px;
overflow: auto; 
display: inline-block;

}

All I want to do now is make th fixed, Thanks a lot. Help is much appreciated

Answer 1

You can absolute position the thead row and give the table some padding so the first row doesn't move under it. This way the header row stays fixed to the top of the table.

table {
  position: relative;
  padding-top: 20px;
}

thead {
  position: absolute;
  top: 0;
  left: 0;
}

Answer 2

Add position:sticky to each th element. You have to do it to the th elements, not the thead or tr elements. This should get you started:

 .table-wrapper { height: 120px; overflow: auto; border: 1px solid blue; } th { position: sticky; padding: 0px; top: 0px; background: white; }

 <div class="table-wrapper"> <table> <thead> <tr> <th>header</th> </tr> </thead> <tbody> <tr> <td>cell</td> </tr> <tr> <td>cell</td> </tr> <tr> <td>cell</td> </tr> <tr> <td>cell</td> </tr> <tr> <td>cell</td> </tr> <tr> <td>cell</td> </tr> <tr> <td>cell</td> </tr> </tbody> </table> </div>