垂直使用填充对齐表格单元格中的文本

Question

我有一个表格，其顶部和底部填充为10px。我想将这些单元格中的文本垂直对齐到底部，这不适用于应用的填充规则。有什么建议吗？

小提琴：http://jsfiddle.net/t520n0z4/1/

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>

CSS代码

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;
}

Answer 1

您可以将padding设置为height而不是使用tr的解决方案：

table {
  border: 1px solid #000;
  border-collapse: collapse;
}
tr {
  height: 40px;/*add height*/
  border-bottom: 1px solid #000;
}
.paddedCell {
  /*padding: 10px 0; remove padding */
  vertical-align: bottom;
  border-right: 1px solid #000;
}
.cell {
  vertical-align: bottom;
}

<table>
  <tr>
    <td class="paddedCell">Name</td>
    <td class="cell">Address</td>
  </tr>
  <tr>
    <td class="paddedCell">Email</td>
    <td class="cell">Phone</td>
  </tr>
</table>