如何更改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>