对齐表格中数字的小数点，单元格中出现伪“中心”对齐

Posted 2023-03-05

【中文标题】对齐表格中数字的小数点，单元格中出现伪“中心”对齐

【英文标题】：Aligning decimal point of numbers in a table, with appearance of pseudo-"centre" alignment in cell

【发布时间】：2012-08-29 02:03:45

【问题描述】：

我想要一个表格，其中包含一列十进制数字，小数点前后长度不同，小数点全部对齐。

列宽必须具有“流动”大小，根据需要扩展以容纳任何数据单元格中的非常长的数字，或者与该列相关的非常长的 HEADER。

包含整数（无小数点）的单元格仍应显示数字，其数字对齐在同一位置，就好像存在小数字符一样。 （例如，数字 512 的数字仍应与仅包含“512”而不是“512”的单元格正确对齐。）

字体应该是无关紧要的；等宽不应该是一个要求。

最后，数字还必须尽可能在列中居中，同时保持小数（可见和隐含！）对齐。 具体来说，小数点前字符最多的单元格的“左侧空白”（如果没有小数字符，则为大多数字符）的宽度必须与“右侧空白”的宽度相同。第一个小数点后字符最多的单元格。

对于最终要求，我特别说“字符”而不是“数字”，因为表格布局应处理符号字符，例如数字前面的正/负号，以及数字后面的测量单位首字母缩写词等字母。

html 4.01 规范，“by the book”，允许使用简单的 HTML 表格轻松完成这样的布局。 （在 4 列 colgroup 的两个内部单元格中拆分数据的十进制字符，外部两个 col width="*" 和内部两个 col width="0*"。将单元格与数字的整数部分右对齐，并将单元格与数字的小数字符和小数部分左对齐。将这两个单元格设置为nowrap，然后设置表格的cellpadding="0" cellspacing="0" rules="groups"。）

但是很多人说这很糟糕，应该使用 CSS 而不是表格来进行格式化。我也明白，一个包含语义正确数据的表格应该将这些数字完整地保存在一个单元格中。但我还没有找到任何实现所需格式的 CSS 方法！

仅将单列的文本对齐方式设置为“居中”并不能保持小数点对齐。

除非我弄错了，否则使用 align="char" 不能处理没有明确小数点的整数，但仍需要像它们那样对齐。

将十进制字符附加到整数上，即使隐藏它，在技术上也会破坏数据完整性。

用不间断空格填充数据不适用于比例（非等宽）字体。而且这种 hack 也会破坏数据的完整性。

通过固定像素偏移指定位置不允许列具有真正的“流动”宽度，根据需要呈现以适合列中所有单元格的内容，包括标题单元格，它可以包含任何长度的数据随时。

javascript 在渲染后读取表格的结果宽度，然后动态计算像素偏移量，然后通过 DOM 重写格式以将数据“滑动”到对齐方式是很慢的，并且随着数据的跳跃而视觉上受到干扰。这是一个彻头彻尾的肮脏黑客，甚至比使用表格进行布局还要肮脏！

在我看来，“纯粹主义者”的 CSS-layout + HTML-semantic-data 方法几乎无法实现这种简单但经常需要的布局！ 我希望有人能证明我错了，并告诉我如何“正确”地做这个布局。

【问题讨论】：

您应该首先尝试找到如何在小数点上对齐数字（使用 align=char not 在现实中起作用），例如***.com/questions/11600838/…

该页面上的每个解决方案都涉及“破坏”数据（例如，通过添加多余的零或空格）或通过插入字符间距跨度（这两者都对可以使用的字体进行了限制）使用），或将数据拆分到两个单元格（与我的“语义不正确”HTML 4.01 表格解决方案相同）。这些解决方案都没有解决可视列中“最佳尝试居中”数据的问题。

我写了这个jQuery插件来解决这个问题。它不需要重新处理数据。 github.com/ndp/align-column

【参考方案1】：

对此有一个纯 html/css 解决方案，但它并不漂亮。您需要将十进制对齐的列分成两列，它们之间没有填充。第一列具有整数值并右对齐，第二列具有小数和十进制值。

<table>
 <thead>
  <th>customers</th>
  <th colspan="2">balance</th>
 </thead>
 <tbody>
  <tr><td>John</td>  <td>4</td><td>.45</td></tr>
  <tr><td>Jane</td>  <td>20</td><td></td></tr>
  <tr><td>Jim</td>   <td>2,300</td><td>.64</td></tr>
 </tbody>
</table>

<style>
    th 
        text-align: center;
    
  td:nth-child(2)  
      text-align: right;
      padding-right: 0;
    
  td:nth-child(3)  
      position: relative;
      left: -0.2em;
      text-align: left;
      padding-left: 0;
    
</style>

您还可以使用“.integer”和“.decimal”等类，而不是 :nth-child 选择器。那会更健壮，但我试图保持标记简短。

【参考方案2】：

在原始 HTML 中无法做到这一点。我写了一个jQuery插件来解决这个问题。见https://github.com/ndp/align-column

与未损坏的表一起使用很简单：

$('table').alignColumn(3); 对齐列索引 3。

【讨论】：

这很好，我看过你的例子。但我不能正确地工作。希望您能够帮助我。给我回复，然后我会显示我的代码。谢谢

如果我在一行中有<th scope="col" colspan="2">stuff</th>，并且在跨越th 的两个tds 正下方，有没有办法让两个单元格的宽度相等？我敢肯定用 JS 可以做到这一点，但你知道 CSS 解决方案吗？

【参考方案3】：

鉴于您的要求，没有解决方案（即使是更简单的对齐小数点的问题）。

【参考方案4】：

我认为“charoff”属性是您所需要的。不幸的是，许多浏览器不支持它...

http://www.w3.org/TR/1999/REC-html401-19991224/struct/tables.html#adef-charoff

您是否尝试将每个数字分成 2 个字符串？例如

“1234.567”将是“1234”。和“567”

然后你可以把第一个字符串放在一个单元格中（右对齐），另一部分放在下一个单元格中（左对齐）

【讨论】：

有没有支持的浏览器？ （此外，如果它有效，它不会居中。）

Dani，我最初的 HTML 4.01 表格解决方案（CSS 纯粹主义者犹豫不决）几乎就是这样做的，将小数点处的数字分成两个字符串。 （除了我把小数点放在右字符串的开头，而不是左字符串的结尾，所以只有左字符串填充的整数仍然显示对齐;-)）

另一种想法是在数字末尾添加零 (0)，以便在同一站点中对齐点（您需要等宽字体）。