CSS and Nested tables

Question

I have html table that contains multiple other tables. My problem is that the inner tables inherit the same rules as the outer table.

Is there a way to over ride the rules of the outer table? I basically want to tell the inner table:

Hey inner table Your name is "X". I want you to forget all about your outer table and its rules. I want you to follow these other specific rules.

IS there a way to make that happen in HTML/CSS? Examples?

Answer 1

table.something > thead > tr > td,
table.something > tbody > tr > td,
table.something > tfoot > tr > td,
table.something > tr > td {
   ...
}

This will ensure that only direct children of the selected table, and not of nested tables, will receive the styles.

Answer 2

I'll assume you have the following

HTML

<table class="outer-table">
    <tr>
        <td>
            <table class="inner-table">
                <tr>
                    <td>
                        I'm some content!
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>

CSS - Without class/ID

table { border: 1px solid black; }
table tr td table { border: 1px solid green; }

Sometimes you can get away with:

table { border: 1px solid black; }
table table { border: 1px solid green; }

CSS - With Class/ID

A little note with Classes and IDs. Classes are something that can be applied to as many elements as you desire and carry the styling specified. IDs should only be used for one element, as this is an identification to that element. That means if you have two nested tables, you need to give that second table a new unique ID.

ID's are shown as # in CSS. So if you just want to use it for the specific ID, it will be:

#outer-table { /* Outer table Style */ }
#inner-table { /* Inner table Style */ }

Using the class (as the example shows) in CSS, is a period. If you use the period without specifying the element, it will be used for all elements that have a class of the same name, so it's best to specify what element you want it attached to.

table.outer-table { /* Outer table Style */ }
table.inner-table { /* Inner table Style */ }