我想要一个包含一列十进制数的表格，小数点前后的长度不同，并且小数点全部对齐。
列宽必须具有“流动”大小，并根据需要进行扩展，以容纳任何数据单元格中的非常长的数字，或者与该列相关的非常长的标题。
包含整数（无小数点）的单元格仍应显示数字，并且数字在同一位置对齐，就像存在小数字符一样。 （例如，数字 512 的数字仍应与仅包含“512”而不是“512”的单元格正确对齐。）
字体应该是无关紧要的；不应要求等宽。
最后，数字还必须尽可能在列中居中，同时保持小数点（可见的和隐含的！）对齐。 具体来说，小数点字符之前具有最多字符的单元格的“左侧空白间隙”（或者如果不存在小数字符，则简单地是大多数字符）的宽度必须与单元格的“右侧空白间隙”的宽度相同。第一个小数字符后字符最多的单元格。
对于最终要求，我特别说“字符”而不是“数字”，因为表格布局应该处理符号字符，例如数字前面的正/负号，以及数字后面附加的测量单位缩写等字母。
HTML 4.01 规范“按规定”允许使用简单的 HTML 表格轻松完成此类布局。 （将数据按小数字符拆分到 4 列 colgroup 的两个内部单元格中，其中外部两个 col width="*" 和内部两个 col width="0*"。右对齐包含数字整数部分的单元格，并将包含数字小数部分和小数部分的单元格左对齐。将这两个单元格设置为 nowrap，然后设置表格的 cellpadding="0" cellspacing =“0”规则=“组”。）
但是很多人说这很糟糕，并且应该使用 CSS 而不是表格来进行格式化。我还了解到，具有语义正确数据的表格应该将这些数字完整地保存在单个单元格中。但我还没有找到任何 CSS 方法来实现所需的格式！
仅将单列的文本对齐方式设置为“居中”并不能保持小数点对齐。
除非我弄错了，否则使用align="char"不能处理没有明确小数点的整数，但仍然需要像有小数点一样对齐。
将小数字符附加到整数上，即使隐藏它，从技术上讲也会破坏数据完整性。
使用不间断空格填充数据不适用于比例（非等宽）字体。这种黑 客攻击也会破坏数据完整性。
通过固定像素偏移指定位置不允许列具有真正的“流动”宽度，根据需要进行渲染以适应列中所有单元格的内容，包括标题单元格，它可以包含任何长度的数据随时。
JavaScript 在渲染后读取表格的最终宽度，然后动态计算像素偏移，然后通过 DOM 重写格式以“滑动”数据对齐，速度很慢，并且当数据跳跃时会产生视觉干扰。这是一个彻头彻尾的肮脏黑 客行为，甚至比使用表格进行布局更肮脏！
在我看来，“纯粹主义者”的 CSS 布局 + HTML 语义数据方法无法实现这种简单但经常需要的布局！ 我希望有人能证明我错了，并向我展示如何“正确”地进行此布局。
P粉5390555262023-10-25 00:27:13
有一个纯 html/css 解决方案，但它并不漂亮。您需要将小数对齐列分成两列，它们之间没有填充。第一列具有整数值且右对齐，第二列具有小数和小数值。
| customers | balance | |
|---|---|---|
| John | 4 | .45 |
| Jane | 20 | |
| Jim | 2,300 | .64 |
您还可以使用“.integer”和“.decimal”等类，而不是 :nth-child 选择器。这会更稳健，但我试图保持标记简短。