如何使固定列 header 位于 header 行的底部

Question

我有一个响应式 table，前两列固定，其余列浮动。我的问题是：

为什么前两列的 header 浮动到 header 行的顶部，而其余的则固定在底部？
如何修复才能让它们都粘在底部？

HTML

<div class="container">
  <div class="table-responsive">
    <table class="table" style="table-layout: auto; width: auto">
      <thead>
        <tr>
          <th>A</th>
          <th>B</th>
          <th>Floating</th>
          <th>Floating</th>
          <th>Floating</th>
          <th>Floating</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>foo</td>
          <td>bar</td>
          <td>baz</td>
          <td>999 Acacia Avenue</td>
          <td>Some longish text value</td>
          <td>Another longish text value</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

CSS

.table > thead:nth-child(1) > tr:nth-child(1) > th:nth-child(1) {
    position: absolute;
    width:30px;
    left:0px;
}
.table > thead:nth-child(1) > tr:nth-child(1) > th:nth-child(2) {
    position: absolute;
    width:60px;
    left:30px;
}
.table > thead:nth-child(1) > tr:nth-child(1) > th:nth-child(3) {
    padding-left:30px;
}
.table > tbody > tr > td:nth-child(1) {
    position: absolute;
    width:30px;
    left:0px;
}
.table > tbody > tr > td:nth-child(2) {
    position: absolute;
    width:60px;
    left:30px;
}
.table> tbody > tr > td:nth-child(3) {
    padding-left:30px;
}
th {
    height: 100px;
}
td {
    white-space: nowrap;
}

Answer 1

当您绝对定位一个 table 单元格时，它不再像 table 那样工作，而 vertical-align: bottom 之类的东西往往会停止工作...您可以使用 flexbox 修复它。

此外，您的选择器 > 和 nth-child(1) 也非常具体。这使得追踪问题变得更加困难。我删除了一堆并添加了 flexbox 来向下推。

这是fiddle

th:nth-child(1), th:nth-child(2) {
    position: absolute;
    width:30px;
    left:0px;
    display:flex;
    flex-direction:column;
    justify-content: flex-end;
}
th:nth-child(2) {
    width:60px;
    left:30px;
}
th:nth-child(3) {
    padding-left:30px;
}
td:nth-child(1), td:nth-child(2) {
    position: absolute;
    width:30px;
    left:0px;
}
td:nth-child(2) {
    width:60px;
    left:30px;
}
td:nth-child(3) {
    padding-left:30px;
}
th {
    height: 100px;
}
td {
    white-space: nowrap;
}

如何使固定列 header 位于 header 行的底部

How to make fixed column headers sit at the bottom of the header row

css

bootstrap-4

responsive

css-tables