使数字相对于圆点居中

Centering numbers relative to the dots

本文关键字：数字 相对于      更新时间：2023-09-26

如何使数字相对于圆点居中?

<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

你可以选择使用JS或者非常奇怪地划分，就像小数在自己的行中做一些样式，你有一些不同的解决方案:

在HTML中对齐小数点

上面链接中的一个例子是来自ardjonkey的解决方案。您有一个额外的列，从小数分隔符和小数中分离整数部分，然后使用以下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，一个简单的方法可能是使用一些现有的库来实现这一点，例如:

jQuery Plugin

相关文章：