Jump to content
Psycho

Right aligning two elements in a column

Recommended Posts

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?

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites
Posted (edited)

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

Share this post


Link to post
Share on other sites

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>

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.