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>

可滚动div中的固定标头

2 个答案: