通过CSS在<table>中设置第一列和第二列的对齐和填充

Question

如何将第一列与左侧的右侧和第二列对齐,并使用CSS填充10px？

<table>
    <tbody>
        <tr><td align="right">Skype:</td><td align="left"> sent</td></tr>
        <tr><td align="right">Tel:</td><td align="left"> +343 343 4343</td></tr>
        <tr><td align="right">e-mail:</td><td align="left"> info@example.com</td></tr>
        <tr><td></td><td align="left"> example@gmail.com</td></tr>
    </tbody>
</table>

Answer 1

您可以使用:first-child选择器,如下所示:

td { padding: 10px }
td:first-child { text-align: right }

你的桌子不再需要对齐了.

Answer 2

虽然这是最简单的，但它并不适用于所有浏览器（特别是旧版本）：

/* While :first-child or :first-of-type (equivalent to this) could have been
 * used, :nth-of-type(n) is easier to change if you ever decide you want
 * different columns to be aligned */
tr td:nth-of-type(1) {
 text-align:right;
}
tr td:nth-of-type(2) {
 text-align:left;
 padding-left:10px;
}

然而，通过更换:nth-of-type(1)同.first和:nth-of-type(2)同.second，并加入class="first"并class="second"于第一和第二<td>每一行中，分别会获得更好的浏览器支持。

如果您想为所有单元格添加填充，只需添加：

td {
 padding:10px;
}