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

【问题标题】：Vertical Align text in a table cell with padding使用填充垂直对齐表格单元格中的文本
【发布时间】：2015-12-10 00:19:35
【问题描述】：

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

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

【问题讨论】：

从底部删除padding jsfiddle.net/t520n0z4/2
然后使用 20px 作为顶部而不是 10 顶部和 10 底部。不知道为什么我没想到。

标签： html css

【解决方案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>

【讨论】：