Question

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

为什么前两列的标题都浮动到标题行的顶部，而其余的都停留在底部？
我如何解决它，使它们都粘在底部？

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

当绝对放置表格单元格时，它停止像表格一样工作，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;
}

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

1 个答案: