Question : What CSS Do I Need To Keep a Table TD Selector From Overriding TDs in Nested Tables?

In my page I have a table nested in another table. Something like this:

<table class="my-table">
    <tr>
        <td>Data 1</td>
        <td>Data 2</td>
        <td>
            <table class="my-panel">
                <tr>
                    <td class="top-left">&nbsp;</td>
                    <td class="top-mid">&nbsp;</td>
                    <td class="top-right">&nbsp;</td>
               </tr>
               ... etc.
            </table>
        </td>
    </tr>
</table>

In my CSS I have a selectors like this:

.my-table td
{
    padding: 0 5px 4px 0;
}

td.top-left
{
    ...
}

td.top-mid
{
    ...
}

etc.

What happens is that the padding from the .my-table td selector is being applied to the TDs in the my-panel table.

How can I adjust my selectors to prevent the padding from cascading down into the nested tables?

Thanks Experts!

Answer : What CSS Do I Need To Keep a Table TD Selector From Overriding TDs in Nested Tables?

You can't really prevent styles from cascading (that's why they're called Cascading Style sheets)

You could add another class for my-panel that overrides the class for my-table

.my-panel
{
padding:0px;
}