html - 如何在两列之间有固定的间隔？

Question

我们有如下表格:

<table style="margin-top: 10px; float:right;">
    <tr>
        <td></td>
        <td align="right">SubTotal</td>
        <td align="right">${subtotal}</td>
    </tr>
    <tr>
        <td></td>
        <td align="right">Tax</td>
        <td align="right">${tax}</td>
    </tr>
    <tr>
        <td></td>
        <td align="right">Total</td>
        <td align="right">${total}</td>
    </tr>
</table>

无论里面的值有多长，第三列到第二列的间隔应该是固定的。

有人可以给我一些建议吗？

Answer 1

有两种方法:

• 使用填充
• 使用空列

它归结为是否在列之间或其中一列内添加空间是否重要。

---

padding-right 第 2 列示例:

td:nth-child(2) {
  padding-right: 30px;
}

---

padding-left 第 3 列示例:

td:nth-child(3) {
  padding-left: 30px;
}

---

空列示例:

td:nth-child(3) {
  width: 30px;
}

<table>
    <tr>
        <td></td>
        <td align="right">SubTotal</td>
        <td></td>
        <td align="right">${subtotal}</td>
    </tr>
    <tr>
        <td></td>
        <td align="right">Tax</td>
        <td></td>
        <td align="right">${tax}</td>
    </tr>
    <tr>
        <td></td>
        <td align="right">Total</td>
        <td></td>
        <td align="right">${total}</td>
    </tr>
</table>

---

重要 (弃用通知)

不要使用cellpadding。
已经deprecated in HTML5 ，以及 align、bgcolor、border、cellspacing、frame、规则、摘要和宽度。cellpadding 的当前浏览器行为是:忽略是否定义了 padding。这意味着如果单元格元素在当前应用的 CSS 中为 padding anywhere 定义了值，它将被忽略。

无论 padding 值如何，预计 future 所有主流浏览器都会忽略它。

如果出于任何原因，您发现自己需要一个过时的 HTML 功能才能工作，您可以相应地指定 DOCTYPE 属性。虽然它会使已弃用的功能正常工作，但它可能会禁用更多现代功能，这些功能在您要使用的 HTML 版本中不可用。