Elegant way to format numbers right aligned in a HTML table

Question

Is there a elegant way to format numbers right aligned in a HTML table?

For Example:

This:

0/0 Hz

10/600 Hz

1200/1200 HZ

Should be like this:

   0 /    0 Hz

  10 /  600 Hz

1200 / 1200 HZ

My table looks like this: https://jsfiddle.net/cwwxrL8a/

Answer 1

Is this approx what you mean?

 table { width: 100%; } tr { text-align: center; } th { border: 1px solid black; width: 20%; } td { border: 1px solid black; width: 20%; }

 <table> <tr> <th>Type</th> <th></th> <th>Freq</th> <td></td> <th>description</th> </tr> <tr> <td>RS64</td> <td>0</td> <td>/</td> <td>1200 Hz</td> <td>test</td> </tr> <tr> <td>SE1225<br></td> <td>0</td> <td></td> <td>1200 Hz</td> <td>test</td> </tr> <tr> <td>SE1226</td> <td>0</td> <td></td> <td>1200 Hz</td> <td>test</td> </tr> </table>

Answer 2

I don't know that what you want to do is possible with giving ids/classes to each part of the text inside that table. Or as @Johannes said, putting everything in it's own cell.

One thing I can recommend is playing around with padding , word-spacing and letter-spacing to see if you can find a look that fits what you want:

.freq{
  text-align: right;
  padding-bottom: 3px;
  padding-right: 150px;
  word-spacing: 5px;
  letter-spacing: 2px;
}

Answer 3

Elegant is a very, very subjective in this case...

It depends if you'd rather mess up the content inside your table cells or mess up your table. It depends how this table is being populated.

I personally prefer to not make a table with tons of cells, and I definitely don't like the idea of having a column that's just full of / s.

I would wrap spans around your two data parts, the over and the total. The downfall for this one is the width setting is necessary. But the upside is it doesn't use table for styling.

A fiddle for you: https://jsfiddle.net/9183ao41/2/

Choose your poison.