6

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

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

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

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

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

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

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

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

简单地将单列的文本对齐设置为“中心”并不能保持小数点对齐。

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

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

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

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

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

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

4

4 回答 4

4

有一个纯 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 选择器。那会更健壮，但我试图保持标记简短。

于 2014-08-25T17:25:52.893 回答
1

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

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

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

于 2013-02-11T23:14:02.170 回答
0

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

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

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

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

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

于 2012-09-04T12:09:39.053 回答
0

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

于 2012-09-04T19:58:10.450 回答