我想要一个包含十进制数列的表,在十进制数之前和之后具有不同的长度,小数点全部对齐.
列宽必须具有"液体"大小,根据需要扩展以容纳任何数据单元中的非常长的数字,或者与该列相关的非常长的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语义数据方法似乎无法做到这种简单但经常需要的布局!我希望有人可以证明我错了,并告诉我如何"正确"地进行这种布局.