How to center right-aligned numbers in table column using CSS?

Question

The picture below illustrates what I\'m trying to accomplish:

UPD. As you

Answer 1

Seems to me that you need to have a second table inside your main table to determine the width of the numbered content to be centered but right aligned. Checkout out this fiddle: Fiddle Example

Example Code:

HTML:

<table class="container">
    <tr><td class="title">Some Title for Numbers in a Table</td></tr>
    <tr><td>
        <table>
            <tr><td>5 000 000</td></tr>
            <tr><td>5 000</td></tr>
            <tr><td>5</td></tr>
            <tr><td>5 000 000</td></tr>
        </table>
   </td></tr>
</table>​

CSS:

.container {
    width: 400px;
    border: 1px solid #999;    
}

.title {
    font-weight: bold;
    text-align: center;    
}

.container table {
    margin: 0px auto;   
}

.container table td {
    text-align: right;
}​

Answer 2

Another possible solution is to use media queries. In our case, we have roughly the same number of columns in every table. So, just change the right padding based on screen size to give the desired right/center alignment:

@media (min-width: 769px)
{
   td
   {
      &.financial
      {
         padding-right: 5px;
      }
   }
}

@media (min-width: 1100px)
{
   td
   {
      &.financial
      {
         padding-right: 20px;
      }
   }
}

@media (min-width: 1400px)
{
   td
   {
      &.financial
      {
         padding-right: 30px;
      }
   }
}

Answer 3

If I understood correctly, you want something like:

 .right-td { align:right; }

going with

<td class="right-td">5000000</td>

Answer 4

In CSS, do this to center-align td

td {text-align:center;}

Answer 5

Below is not an ideal solution, since the size of the numbers are initially unknown, but it's a little closer without too much additional tags.

CSS:

.numSpan {
    display: inline-block;
    width: 100px;
    text-align: right;
}
td { text-align: center; }

HTML:

<td>
    <span class="numSpan">5</span>
</td>