How to center right-aligned numbers in table column using CSS?

Question

The picture below illustrates what I'm trying to accomplish:

UPD. As you see, I need the longest number to be centered in its cell, and all other numbers to be right aligned to the longest number's right border.

UPD 2. The numbers are dynamic (unknown initially).

Answer 1

There doesn’t seem to be any direct CSS method. But you could consider the approach suggested by @CMKanode in a comment. You would need to preprocess the numbers in the column and compute the largest of them (this requires locale-sensitive parsing since you are using a thousands separator), and then you would left-pad the numbers to the same number of characters, using U+2007 FIGURE SPACE as a space that has the same width as digits. And, of course, the column would be declared as centered.

So in the example, “5” would be padded to         5 (assuming you use a normal space as thousands separator; U+2009 THIN SPACE might be better, but it has font issues.

The approach would mean that you need to use a font where digits have the same width (most fonts in computers do) and that contains U+2007.

If the thousands separator were a comma or a period, for example, you would need to use U+2008 PUNCTUATION SPACE in its stead.

In the end, I think this would be excessively complicated. It is probably better to make the column right-aligned but with a suitable left and right padding, selected as a good guess based on the width of the column header and the expected widths of the numbers.

Answer 2

Below is not an ideal solution, since the size of the numbers are initially unknown, but it's a little closer without too much additional tags.

CSS:

.numSpan {     display: inline-block;     width: 100px;     text-align: right; } td { text-align: center; } 

HTML:

<td>     <span class="numSpan">5</span> </td>