CODEWITHSUNDEEP
htmlcssnestedcss-tables
codingJoe
codingJoe

Reputation: 4943

CSS and Nested tables

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?

Upvotes: 22

Views: 39212

Answers (3)

jimminySnippet
jimminySnippet

Reputation: 11

The easiest way is class and id. Be sure to use the element. 

table.outter { some: style; } /* class */  
table#inner { some: style; } /* id */

You can also use 

table { some: style; }  
table table { some: style; } /* override outter table */

or combine the two 

table.outter { some: style; } /* class */  
table.outter table#inner { some: style; } /* id */

Hope this helps.

Upvotes: 1

Dave
Dave

Reputation: 892

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 */ }

Upvotes: 4

Niet the Dark Absol
Niet the Dark Absol

Reputation: 324620

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.

Upvotes: 26

Related Questions