html - 右对齐单元格表格中的文本，但向右添加 'variable' 填充以从表格边框创建空间

Question

我有一个表格，其中包含一些包含价格的列。我在生成的内容中添加了货币，为了更好地包含数字，我将这些单元格的文本右移。

我的问题是我还想从右边添加一些“空格”，以免数字太窄而超出表格边界。

列有不同的宽度并且可以包含不同的动态创建的数字，所以我尝试使用 % 来填充值，但结果不是很好。

在 this example 您可以看到表格的实际外观。

价格的调整遵循以下规则:

td.cella-prezzo {
    padding-right: 6%;
    text-align: right;
    white-space: nowrap;
}

我认为 paddign 指的是单元格宽度，而不是表格宽度，所以我尝试设置 padding-right:50% 但太多了。

我想要获得的只是右对齐价格，大约在它们自己列的中心，而不取决于有效列宽。

例如，从视觉上看，期望的结果与“Costo Pers./Notte [B]”列中包含的结果非常相似。

Answer 1

尝试将填充应用于单元格内的元素:

td.cella-prezzo span {
    display: block;
    padding-right: 16%;
    text-align: right;
    white-space: nowrap;
}

这将使百分比计算基于单元格宽度而不是整个表格。注意:我添加了 display: block 只是为了保持最小的变化；最好在 html 代码中将 span 替换为 div。