javascript - 相对于点居中数字

Question

如何使数字相对于点居中？

<table>
  <tr>
     <td>132.13</td>
     <td>1</td>
     <td>23.4124</td>
     <td>7.2</td>
     <td>123.33</td>
  </tr>
</table>

我可以对 td 使用 text-align，但它不会相等。

我想收到这样的效果:

___________
| 132.13   |
|   1      |
|  23.4124 |
|   7.2    |
| 123.33   |
____________

我怎样才能做到呢？我可以使用 CSS 和 jQuery。

Answer 1

您可以选择使用 JS 或非常奇怪地划分它，例如将小数放在自己的行中并进行一些样式设置，这里有一些不同的解决方案:

Aligning decimal points in HTML

上面链接中的一个示例是来自 ard jonkey 的解决方案。您有一个额外的列，将整数部分与小数分隔符和小数分开，然后使用以下 css:

table{border-collapse:collapse;}
td{padding:0px;margin:0px;border:0px;}
td+td{text-align:right;}
td,td+td+td{text-align:left;}

合并标题行中的两列:

<table>
    <tr><th>Name</th><th colspan=2>Height</th></tr>
    <tr><td>eiffeltower</td> <td>324</td> <td></td></tr>
    <tr><td>giraffe</td> <td>5</td> <td>,30</td></tr>
    <tr><td>deer</td> <td>1</td> <td></td></tr>
    <tr><td>mouse</td> <td>0</td> <td>,03</td></tr>
</table>

由于您使用的是 jQuery，一个简单的方法可能是使用一些可以实现此目的的现有库，例如:

Align Column jQuery Plugin