对齐表格中的小数点,在单元格中出现伪"中心"对齐

Question

我想要一个包含十进制数列的表,在十进制数之前和之后具有不同的长度,小数点全部对齐.

列宽必须具有"液体"大小,根据需要扩展以容纳任何数据单元中的非常长的数字,或者与该列相关的非常长的HEADER.

包含整数(无小数点)的单元格仍应显示数字,这些数字在同一位置对齐,就像存在十进制字符一样.(例如,数字512的数字应该仍然正确对齐,而单元格只包含"512"而不是"512".)

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

最后,数字也必须尽可能在列中居中,同时保持小数(可见和暗示!)对齐.具体地说,在十进制字符之前具有最多字符的单元格的"左侧空白间隙"(或者如果不存在小数字符则仅为大多数字符)必须具有与"右侧空白间隙"相同的宽度.第一个十进制字符后面的字符数最多的单元格.

对于最终要求,我特别说"字符"而不是"数字",因为表格布局应该处理符号字符,例如在数字前面加上正/负符号,以及附加数字的测量单位首字母缩写等字母.

HTML 4.01规范"通过本书"允许使用简单的HTML表格轻松完成这样的布局.(在4列colgroup的两个内部单元格中分割其十进制字符数据,外部两个col width="*"和内部两个col width="0*".右边对齐单元格的整数部分,并左对齐单元格使用十进制字符和小数部分.将这两个单元格设置为nowrap,然后设置表格cellpadding="0" cellspacing="0" rules="groups".)

但是很多人都说这很糟糕,为了格式化,应该使用CSS代替表格.我也理解,具有语义正确数据的表应该将这些数字保持在单个单元格中.但我还没有找到任何实现所需格式的CSS方法!

简单地将单个列的文本对齐设置为"中心"不会保持小数点对齐.

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

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

使用不间断空格填充数据不适用于比例(非等距)字体.而这种破解也会打破数据完整性.

通过固定像素偏移指定位置不允许列具有真正的"液体"宽度,根据需要进行渲染以适合列中所有单元格的内容,包括标题单元格,其可以包含任何时间长度的数据.

在渲染后读取表格结果宽度的JavaScript,然后动态计算像素偏移量,然后通过DOM重写格式以"滑动"数据到对齐速度很慢,并在数据跳跃时视觉上中断.这是一个彻头彻尾的肮脏黑客,甚至比使用表格进行布局更脏!

在我看来,像"纯粹主义者"的CSS布局+ HTML语义数据方法似乎无法做到这种简单但经常需要的布局!我希望有人可以证明我错了,并告诉我如何"正确"地进行这种布局.

Answer 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 选择器。这会更稳健，但我试图保持标记简短。

Answer 2

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

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

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

“1234.567”将变为“1234”。和“567”

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