CSS and Nested tables

codingJoe picture codingJoe · Oct 29, 2011 · Viewed 30.9k times · Source

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

Niet the Dark Absol picture Niet the Dark Absol · Oct 30, 2011
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.