Jump to content


Photo

Right aligning two elements in a column


  • Please log in to reply
3 replies to this topic

#1 Psycho

Psycho
  • Moderators
  • Move along, nothing to see here
  • 11,928 posts
  • LocationCanada

Posted 30 March 2018 - 07:50 PM

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?


The quality of the responses received is directly proportional to the quality of the question asked.

I do not always test the code I provide, so there may be some syntax errors. In 99% of all cases I found the solution to your problem here: http://www.php.net

#2 Barand

Barand
  • Moderators
  • Sen . ( ile || sei )
  • 18,110 posts

Posted 30 March 2018 - 07:57 PM

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


If you are still using mysql_ functions, STOP! Use mysqli_ or PDO. The longer you leave it the more you will have to rewrite.

Donations gratefully received






moon.png

|baaGrid| easy data tables - and more
|baaChart| easy line, column and pie charts

#3 Psycho

Psycho
  • Moderators
  • Move along, nothing to see here
  • 11,928 posts
  • LocationCanada

Posted 31 March 2018 - 03:02 AM

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, 31 March 2018 - 03:03 AM.

The quality of the responses received is directly proportional to the quality of the question asked.

I do not always test the code I provide, so there may be some syntax errors. In 99% of all cases I found the solution to your problem here: http://www.php.net

#4 kicken

kicken
  • Gurus
  • Wiser? Not exactly.
  • 3,396 posts
  • LocationBonita, FL

Posted 31 March 2018 - 08:48 AM

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>

Did I help you out? Feeling generous? I accept tips via Bitcoin @ 14mDxaob8Jgdg52scDbvf3uaeR61tB2yC7
Kicken's World⦄ ⦃Recycle old CD's




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users