Как изменить вертикальное выравнивание по ряду строк в таблице html

Question

Я пытаюсь настроить вертикальное выравнивание в строке заголовка таблицы, и мне не очень повезло. Кажется, он застрял на вертикальном выравнивании по умолчанию по центру, и я хочу, чтобы он был выровнен снизу.

Часть проблемы заключается в том, что я хочу отформатировать строку заголовка одним способом и отформатировать элементы th в первый столбец по-другому. Я попытался настроить свойство vertical-align в разные стороны и с каждым элементом. Кажется, что свойство vertical-alignment работает на элементах th и td, но не на элементах thead. Я что-то упустил?

table,
td,
th {
  border: 1px solid black;
}

table {
  border-collapse: collapse;
  width: 100%;
}

thead {
  line-height: 100px;
  border: 2px solid blue;
  vertical-align: bottom;
}

th {
  vertical-align: bottom;
}

td {
  height: 50px;
  vertical-align: bottom;
}

<table>
  <thead>
    <tr>
      <th>ID</th>
      <th>Name</th>
      <th>Amount</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>A1</th>
      <td>Albert</td>
      <td>100</td>
    </tr>
    <tr>
      <th>B2</th>
      <td>Bobby</td>
      <td>150</td>
    </tr>
    <tr>
      <th>C3</th>
      <td>Charlie</td>
      <td>300</td>
    </tr>
  </tbody>
</table>

Я ожидаю, что результат будет выглядеть как

Answer 1

Надеюсь, это поможет вам.

table, td, th {
  border: 1px solid black;
}

table {
  border-collapse: collapse;
  width: 100%;
}

thead {

  border: 2px solid blue;
  vertical-align: bottom;
}

th {vertical-align: bottom;}
thead th {
  height: 100px;
}

td {
  height: 50px;
  vertical-align: bottom;
}

<table>
  <thead>
    <tr>
      <th>ID</th>
      <th>Name</th>
      <th>Amount</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>A1</th>
      <td>Albert</td>
      <td>100</td>
    </tr>
    <tr>
      <th>B2</th>
      <td>Bobby</td>
      <td>150</td>
    </tr>
    <tr>
      <th>C3</th>
      <td>Charlie</td>
      <td>300</td>
    </tr>
  </tbody>
</table>