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

Posted 2023-03-06

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

【英文标题】：CSS in table column (td): Align right in but move to the left with padding

【发布时间】：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 的内边距）

【参考方案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>