右对齐单元格表格中的文本，但向右添加“变量”填充以从表格边框创建空间

Question

我有一个包含价格的列的表格。我添加了带有生成内容的货币，为了更好地填写数字，我把这些单元格的文本写到了正确的位置。

我的问题是我还想从右侧添加一些“空格”，使数字不会太窄到桌边界。

列具有不同的宽度，可以包含不同的dinamically创建的数字，所以我尝试使用％作为填充值，但结果不太好。

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

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

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

我认为paddign被称为单元格宽度，而不是表格宽度，所以我尝试设置padding-right：50％但是太多了。

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

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

Answer 1

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

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

这将根据单元格宽度而不是整个表格进行百分比计算。 注意：我添加了display: block只是为了保持最小化;最好用html代码中的div替换span。