Search code examples
csscss-tables

How to apply text-align left in the first column and text-align right in the others

I have a Table to style. How can I apply text-align:left; just for the first column and text-align:right; for the other columns?

Here my table example:

http://jsfiddle.net/gianlucaguarini/hAv7P/

At the moment the text-align is left for all the columns.

Solution

  • You need to specify the following CSS:

    .table td,
.table th
{
    text-align:left;
}

#right,
.table td + td,
.table th + th
{
    text-align:right;
}

    An example is at JSFiddle.

    You can read more about adjacent siblings CSS selector at 5.7 Adjacent sibling selectors.