在表格單元格中使用填充符垂直對齊文本

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>