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

相对于点居中的数字

1 个答案: