Как сделать так, чтобы фиксированные заголовки столбцов располагались внизу строки заголовка

Question

У меня есть адаптивная таблица с фиксированными первыми двумя столбцами, а остальные плавающими. Мои вопросы:

1. Почему заголовки первых двух столбцов плавают в верхней части строки заголовка, а остальные - в нижней?
2. Как это исправить, чтобы они все прилипали к дну?

Fiddle

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, чтобы толкнуть вещи вниз.

Вот скрипка

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