Right-align and center in table

Question

I frequently use tables containing numbers that must be right-aligned so that the digits in the ones/tens/hundreds/thousands places line up. Like this:

    2,343
1,000,000
       43
   43,394
  232,111

Column headers in these tables are centered. When the table columns are wide, it doesn't look great:

         Column 1                    Column 2
===========================|===========================
                     2,343 |                        32     
                        43 |                    44,432
                12,243,394 |                        23 
                   232,111 |                     4,432

Is there a way using javascript, jQuery or CSS to center the numbers based on the widest number, but keep the right justification? The desired end result would be like this:

         Column 1                    Column 2
===========================|===========================
             2,343         |              32     
                43         |          44,432
        12,243,394         |              23 
           232,111         |           4,432

I know I could set td padding globally, but I am looking for a dynamic solution that will adapt to different tables, even with different column width and number width.

Can this be done?

Answer 1

For a number column you want to align "centered right", use three columns, where the left and right column are set to 50%.

The numbers are placed in the middle column. Since no width is set for this column, it gets the smallest possible width, which is the width of the widest number. This width is taken from the left and right column in equal parts.

HTML:

<table>
  <colgroup><col width="50%"><col><col width="50%"></colgroup>
  <thead style="text-align:center;">
    <tr><td colspan="3"> /* any optional head line */ </td></tr>
  </thead>
  <tbody style="text-align:right;">
    <tr><td></td><td>123,456,789</td><td></td></tr>
    <tr><td></td><td>456,789</td><td></td></tr>
    <tr><td></td><td>789</td><td></td></tr>
  </tbody>
</table>

It works fine as long as all numbers in a column have the same number of decimal places. If required, you can use the left column to align signs and the right column to display footnotes (left-aligned) without disturbing the alignment.

For more than one number column use following rule, where n is the number of number columns and x_i is half of the desired width of the i-th number column and sum(x_i)=100:

<table>
  <colgroup>
    <col width="x_i %"><col><col width="x_i %"> // for each number column
  </colgroup>
  <thead style="text-align:center;">
    <tr><td colspan="3*n"> /* table head line */ </td></tr>
    <tr><td colspan="3"> /* column head line */ </td></tr> // for each number column
  </thead>
  <tbody style="text-align:right;">
    <tr>
      <td></td><td> /* number */ </td><td></td> // for each number column
    </tr>
  </tbody>
</table>

Answer 2

The obvious trick would be to use additional table cells. I.e.

         Column 1                   Column 2
===========================|===========================
      .      2,343 .       |        .     32 .    
      .         43 .       |        . 44,432 .
      . 12,243,394 .       |        .     23 .
      .    232,111 .       |        .  4,432 .

Where the . indicate invisible table borders with automatic width.