Better way to right align text in HTML Table

Question

I have an HTML table with large number of rows, and I need to right align one column.

I know the following ways,

..

        

Answer 1

To answer your question directly: no. There is no more simple way to get a consistent look and feel across all modern browsers, without repeating the class on the column. (Although, see below re: nth-child.)

The following is the most efficient way to do this.

HTML:

  

    
...
    
...
    
10.00
    
...
    
...
  
  

    
...
    
...
    
11.45
    
...
    
...
  

CSS:

table.products td.price {
  text-align: right;
}

nth-child is now supported by 96% of the browsers, what is below is now 11 years old!

Why you shouldn't use nth-child:

The CSS3 pseudo-selector, nth-child, would be perfect for this -- and much more efficient -- but it is impractical for use on the actual web as it exists today. It is not supported by several major modern browsers, including all IE's from 6-8. Unfortunately, this means that nth-child is unsupported in a significant share (at least 40%) of browsers today.

So, nth-child is awesome, but if you want a consistent look and feel, it's just not feasible to use.