Mark Parnell said:
Presumably in order to implement an excessively complicated layout idea
in an unnecessarily complicated way. Once in a blue moon, though,
there's a case where a tabular structure contains an element with an
internal tabular structure.
Put a class on the first one, so the styles only apply to it.
No, that won't stop inheritance. Consider a simple case:
<style type="text/css">
table.outer { color: red; background: white; }
</style>
...
<table border="1" class="outer">
<tr><td>foo</td></tr>
<tr><td>
<table border="1">
<tr><td>bar</td></tr>
</table>
</table>
Both "foo" and "bar" will appear in red, since the inner table's cell
inherits the color property from its parent (tr), which inherits the
property from its parent, etc., until we get to the outer table element
that has the property explicitly set. Naturally assuming that no other
style sheet sets the property for the inner cell or any element that is
between it and the outer table in nesting.
And this is a clue to the answer: There is no way to turn off
inheritance in CSS, since it's a defined part of CSS. Some properties
are inherited by definition, when an element hasn't got a property set
otherwise; some properties are not, but this is part of CSS definition
which you cannot change.
What you _can_ do is to set properties to elements so that inheritance
will not be applied.
That means setting any desired properties for the _inner_ table, or for
elements inside it, e.g.
table table { color: black; background: white; }
There's no way to make the color the same as the element enclosing the
outer table, except by explicitly setting it to a particular value.
That is, there is no inheritance that skips nesting levels.
