1

How can I centering numbers relative to the dots? 

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

I can use text-align for td, but it will not be equally.

I would like to receive this effect:

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

How can I make it? I can use CSS and jQuery.

nelec
  • 19
  • 1

1 Answers1

0

You have the alternative of using JS or divide it really strangely, like the decimals in their own row and do some styling, you have some various solutions here:

Aligning decimal points in HTML

One example from the link above is the solution from ard jonkey. You have one extra column, split the integer part from the decimal separator and the decimals and then use the following css:

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

combine two columns in the header row:

<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>

Since you're using jQuery, a easy way would probably be to use some of the existing libraries that can achieve this, example:

Align Column jQuery Plugin

Community
  • 1
  • 1
Moris
  • 2,903
  • 16
  • 15
  • While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. - [From Review](/review/low-quality-posts/13971623) – Mike Oct 13 '16 at 14:57
  • Thought it was ok since it's a duplicate and the main link is to stack overflow, but you're right. I updated the answer now, thanks for the heads up! :) – Moris Oct 13 '16 at 17:32