1

I'm attempting to create a table with the first cell left justified, and all the other cells centered.

I am able to do this, but thought I'd use a different CSS technique, and it's got me stumped.

In the example below, i would think the table cell with class="left" would take precedence over the table level center alignment, but this does not seem to be the case. All cells are centered.

All inputs appreciated!

<head>
    <style type="text/css">

        td {border:solid 1px black;}

        table.SomeTable td {text-align:center;}

        td.Left {text-align:Left;}

    </style>
</head>
<body>
    <table class="SomeTable" cellpadding="10" cellspacing="0">
        <tr>
            <td style="width:100px;" class="Left">Why not left justified?</td>
            <td style="width:100px;">aaa</td>
            <td style="width:100px;">aaa</td>
            <td style="width:100px;">aaa</td>
        </tr>
    </table>
</body>
FatFingers
  • 6,847
  • 5
  • 23
  • 20

1 Answers1

4

The table.SomeTable td rule is indeed more specific than td.Left.

You can fix it by adding the table class:

table.SomeTable td.Left {text-align:Left;}

here's some background on how CSS specificity works: Points in CSS specificity

Community
  • 1
  • 1
Pekka
  • 442,112
  • 142
  • 972
  • 1,088