[英]Vertical Align text in a table cell with padding
I have a table with cells that have top and bottom padding of 10px. 我有一个表格,其顶部和底部填充为10px。 I would like to vertically align the text in these cells to the bottom, which won't work with the padding rule applied.
我想将这些单元格中的文本垂直对齐到底部,这不适用于所应用的填充规则。 Any suggestions?
有什么建议么?
Fiddle: http://jsfiddle.net/t520n0z4/1/ 小提琴: http : //jsfiddle.net/t520n0z4/1/
HTML Code: 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 Code 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;
}
A solution instead of using padding
you can set height
to tr
: 一个解决方案,而不是使用
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.