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

​