How to prevent to pass css attributes to the inner elements?

Question

I'm creating 3 tables.

<table id="first">
    <tr>
        <td>
        1. CAPTION
        </td>
    </tr>
    <tr>
        <td>
            <table id="second">
                <tr>
                    <td>
                        2. CAPTION
                    </td>
                </tr>
                <tr>
                    <td>
                        <img src="" width="100" height="100" />
                    </td>
                </tr>
            </table>
        </td>
    </tr>
    <tr>
        <td>
            <table id="third">
                <tr>
                    <td>
                        3. CAPTION
                    </td>
                </tr>
                <tr>
                    <td>
                        <img src="" width="100" height="100" />
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>

I want to add 10px padding (padding-top:10px) for the main table td elements.

#first tr td
{
    padding-top: 10px;
    padding-left: 0pt;
}

But this padding is adding to inner tables td elements.

How can i prevent to pass padding-top setting to the inner tables?

Answer 1

Use #first > tr > td.

It means "a td that is a direct child of a tr that is a direct child of an element with ID 'first'".

Answer 2

There are 2 solutions.

One (the hard way), Specify padding values to the inner child elements so that it over-rides the parent style specifications.

Two (the above method), Use '#first > tr > td' but, it leads to cross browser comparability issues.

ie-6 does have a large share of the browser market.