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在第二列示例中：

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，rules，{{1 }}和summary。 width当前的浏览器行为是：忽略是否定义了cellpadding。这意味着如果当前应用CSS中cell元素具有padding anywhere 的定义值，它将被忽略。

将来，无论padding的值如何，所有主流浏览器都将忽略它。

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

如何在两列之间设置固定间隔？

1 个答案: