表格列 (td) 中的 CSS：向右对齐但向左移动并使用填充

【问题标题】：CSS in table column (td): Align right in but move to the left with padding表格列 (td) 中的 CSS：向右对齐但向左移动并使用填充
【发布时间】：2019-04-10 03:16:04
【问题描述】：

我必须在 html 表格中显示数字，并且更喜欢将它们向右对齐，但是数字需要像这样放在单元格的左侧：

Header A  |Header B  |
 -1       |5000      |
  1       | -20      |
100       |   1      |

列的宽度是动态的，字体有点像Arial。我无法更改 html 中的任何内容（div、colgroup、..），也无法使用 Javascript，只能将 CSS 类附加到 td。

我尝试使用calc(100% - 25px)，但不幸的是 100% 是表格的宽度，而不是列的宽度。

请在此处查看我的示例：http://jsfiddle.net/mwtL9cde/4/ （我放了 50px 的内边距）

【问题讨论】：

标签： css html-table padding

【解决方案1】：

你唯一能做的就是为你的单元格使用固定宽度，结合padding-right通过试错获得的值，如下面的sn-p（另请注意box-sizing: border-box包括以固定宽度填充）

但这当然不是动态的，不会自动适应其他值。

table {
width: 400px;
}
td {
  width: 200px;
    text-align: right;
    box-sizing: border-box;
}
td:first-child {
    padding-right: 122px;
    background-color: yellow;
}

td:nth-child(2) {
    padding-right: 162px;
    background-color: red;
}

<table>
    <colgroup span="2"></colgroup>
    <tr>
        <td class="firstColumn">-280</td>
        <td class="secondColumn">100</td>
    </tr>
    <tr>
        <td class="firstColumn">100</td>
        <td class="secondColumn">1</td>
    </tr>
    <tr>
        <td class="firstColumn">-1</td>
        <td class="secondColumn">200</td>
    </tr>
    <tr>
        <td class="firstColumn">123412345</td>
        <td class="secondColumn">-280</td>
    </tr>
</table>

【讨论】：