Html 将表格单元格中的文本垂直对齐并填充

我有一张桌子，上面和下面都有10px的填充物。我想将这些单元格中的文本垂直对齐到底部，这与应用的填充规则无关。有什么建议吗

小提琴：

HTML代码：

<table>
  <tr>
    <td class="paddedCell">Name</td> <!--text should be aligned to the bottom here -->
    <td class="cell">Address</td>
  </tr>
  <tr>
    <td class="paddedCell">Email</td> <!-- text should be aligned to the bottom here -->
    <td class="cell">Phone</td>
  </tr>
</table>

---

一种替代使用

填充的解决方案

您可以将

高度设置为
tr
：


表格{
边框：1px实心#000；
边界塌陷：塌陷；
}
tr{
高度：40px；/*添加高度*/
边框底部：1px实心#000；
}
.填充电池{
/*填充：10px 0；移除填充*/
垂直对齐：底部对齐；
右边框：1px实心#000；
}
.细胞{
垂直对齐：底部对齐；
}

名称
地址
电子邮件
电话
从底部移除
填充
，然后在顶部使用20px，而不是10个顶部和10个底部。不知道为什么我没想到。
table {
  border: 1px solid #000;
  border-collapse: collapse;
}

tr {
  border-bottom: 1px solid #000;
}

.paddedCell {
  padding: 10px 0;
  vertical-align: bottom;
  border-right: 1px solid #000;
}

.cell {
  vertical-align: bottom;
}