如何更改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 {&nbsp; border: 1px solid black;}table {&nbsp; border-collapse: collapse;&nbsp; width: 100%;}thead {&nbsp; border: 2px solid blue;&nbsp; vertical-align: bottom;}th {vertical-align: bottom;}thead th {&nbsp; height: 100px;}td {&nbsp; height: 50px;&nbsp; vertical-align: bottom;}<table>&nbsp; <thead>&nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; <th>ID</th>&nbsp; &nbsp; &nbsp; <th>Name</th>&nbsp; &nbsp; &nbsp; <th>Amount</th>&nbsp; &nbsp; </tr>&nbsp; </thead>&nbsp; <tbody>&nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; <th>A1</th>&nbsp; &nbsp; &nbsp; <td>Albert</td>&nbsp; &nbsp; &nbsp; <td>100</td>&nbsp; &nbsp; </tr>&nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; <th>B2</th>&nbsp; &nbsp; &nbsp; <td>Bobby</td>&nbsp; &nbsp; &nbsp; <td>150</td>&nbsp; &nbsp; </tr>&nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; <th>C3</th>&nbsp; &nbsp; &nbsp; <td>Charlie</td>&nbsp; &nbsp; &nbsp; <td>300</td>&nbsp; &nbsp; </tr>&nbsp; </tbody></table>