Right aligning two elements in a column

[Psycho]

I have columns of data displayed in a table. Some of those columns consist of a time (number of seconds) and the difference from a target. I was originally reporting these values in separate columns, but it was not intuitive when they were separated. So, I have decided to show both values in a single column. However, the display is 'messy' because the first value, which always has two decimal places, is no longer lining up.

 

Example

 

16.26 (-15.74)

 27.95 (-4.05)

57.56 (+25.56)

 

 

I can mimic how I want it displayed using a monospace font and adding an additional space to account for the smaller (difference) value in the 2nd row

 

16.26 (-15.74)

 27.95  (-4.05)

57.56 (+25.56)

 

 

However, I don't want to be forced to use a monospace font and to add spaces to make the numbers align. Each pair of value will exist inside a single <TD> element.

 

Any ideas on how I can wrap those elements in Divs/Spans with CSS properties to get the intended output?

[Barand]

Once you line them up they are visually in to columns anyway, so what's wrong with two (narrow) physical columns?

[Psycho]

The issue was that when the values are in two separate columns they were trying to "understand" the +/- values independently - not understanding that they are really a descriptor to the first value. By putting them into a single column such as this I didn't have to explain it any more.

 

I went ahead and used a single column header for those two columns using colspan="2", put the two values into separate columns and - finally - removed the border between the two cells giving them the appearance of being in the same cell, but still maintaining independent right alignment. Because the number of columns is dynamic, it was a bit of a pain to do it, but it solved my problem.

Edited March 31, 2018 by Psycho

[kicken]

You could also use inline-block spans with a fixed width:

 

example:

table { 
  background: white;
}


td span {
  display: inline-block;
  width: 5em;
  text-align: right;
  border: 1px solid red;
}

<table>
<tr>
<td>Extra column</td>
<td>
<span>16.26</span><span>(-15.74)</span>
</td>
</tr>
<tr>
<td>asdfadF</td>
<td>
<span>27.95</span><span>(-4.05)</span>
</td>
</tr>
<tr>
<td>asfdasfdasfas</td>
<td>
<span>57.56</span><span>(+25.56)</span>
</td>
</tr>
</table>