在可滚动的 div 中固定标题

Question

我有一个带有可滚动 div 的引导表。 用 div 包装表格帮助我解决了我的 th 和 td 对齐问题，但是我的表格标题也会滚动，我希望它们得到修复。

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

}

我现在要做的就是修复，非常感谢。 非常感谢帮助

Answer 1

您可以绝对定位 thead 行并为表格提供一些填充，以便第一行不会在其下方移动。 这样标题行就固定在表格的顶部。

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

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

Answer 2

添加position:sticky到每个th元素。 您必须对th元素执行此操作，而不是对thead或tr元素执行此操作。 这应该让你开始：

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