CODEWITHSUNDEEP
htmlcsshtml-table
FatFingers
FatFingers

Reputation: 6897

CSS Why is this tablecell not left aligned?

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>

Upvotes: 1

Views: 3861

Answers (1)

Pekka
Pekka

Reputation: 449395

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

Upvotes: 4

Related Questions