HTML表格对齐问题答案

【问题标题】：HTML Table Alignment IssueHTML表格对齐问题
【发布时间】：2013-12-02 20:04:49
【问题描述】：

我有一张需要显示的余额表（用于付款）。但是，如果付款逾期，则金额旁边需要有一个星号。现在，它显示如下：

但我希望它看起来更像这样（请忽略价值差异和颜色/大小差异）：

特别是，我希望所有数字在小数点处对齐，并且星号被添加到末尾，而不影响实际数字的布局。正如你所看到的，它当前的显示方式，因为它是右对齐的，所以星号会压过数字。如果我将表格单元格左对齐，那么数字不会在小数点处正确排列（例如，总数的小数点，因为它是 6 位数，不会与 5 位数的分期付款行对齐）。如何让列遵循第二个示例（蓝色背景的那个）的格式？

如果我的问题不清楚，请告诉我。

【问题讨论】：

你能告诉我们你的html代码吗？您如何将* 包含在span 中？
整数位、小数点和小数位使用三个单独的列。

标签： html css formatting tabular

【解决方案1】：

实际的解决方案是添加一个仅包含星号或空格的列。然后您可以简单地右对齐包含金额的列。

这仍然会留下一个小的布局问题，可以在问题的第二个屏幕截图中看到：如果您对某些行使用粗体字，则事情不会完全对齐。原因是粗体字通常比相应的正常字面宽一些。考虑使用其他不具有此类效果的突出显示方法，例如独特的背景颜色。

理论上，HTML 和 CSS 都有将列与小数点对齐的工具。然而，尽管它们已经在规范中多年，它们还没有在浏览器中实现。

另一种更笨拙且不太可靠的实用方法是将星号放在span 元素中，用display: inline-block 声明，设置一些特定的宽度，并设置与数量单元格上的右侧填充相同的宽度没有星号的。但是单独的列方法很简单，也更合乎逻辑：星号实际上是它自己的一个信息项。

【讨论】：

【解决方案2】：

将文本与框的左侧和顶部对齐。不过，那不会将它们排成@小数点。将它们排成小数点会有点挑战。

你可以这样做。

[跨度美元][跨度变化][跨度星号]

只需确保为星号设置明确的宽度，并在美元上右对齐文本，在更改和星号上左对齐。

【讨论】：