Nexted Tables, Preventing Cascade

[Blue Apricot]

How can I prevent certain Class properties from cascading from a parent
table to its children?

Specifically, I have a table that acts as a container (I call it
class="page"), with a certain border, background color, padding, etc.
I am finding that the tables that it contains "inherit" certain
attributes, like padding, which I do not want them to do.

Can I prevent this "cascade"?

Interestingly, if the same properties are defined as an inline style --
that is, not within a class -- they are not inherited. Can someone
explain why this would be?

Thanks,
Blue Apricot 416

[Harlan Messinger]

Blue Apricot wrote:

How can I prevent certain Class properties from cascading from a parent
table to its children?

Specifically, I have a table that acts as a container (I call it
class="page"), with a certain border, background color, padding, etc.
I am finding that the tables that it contains "inherit" certain
attributes, like padding, which I do not want them to do.

Can I prevent this "cascade"?

Interestingly, if the same properties are defined as an inline style --
that is, not within a class -- they are not inherited. Can someone
explain why this would be?

We can try guessing what your code looks like, but without specifics
it's really hard to tell.

[Andy Dingley]

Blue Apricot wrote:

How can I prevent certain Class properties from cascading from a parent
table to its children?

Start by posting a URL so that we can see what you're doing.

You can't prevent the cascade. Your options are to either over-rule it
by soemthing even more specific, or (usually better) to stop it
mis-applying itself in the first place by making the selector that
first applies the rule more specific.

Validating your CSS at the W3C site and then studing the tree it
returns is often instructive.

[Blue Apricot]

Andy Dingley wrote:

Blue Apricot wrote:

How can I prevent certain Class properties from cascading from a parent
table to its children?

Start by posting a URL so that we can see what you're doing.

You can't prevent the cascade. Your options are to either over-rule it
by soemthing even more specific, or (usually better) to stop it
mis-applying itself in the first place by making the selector that
first applies the rule more specific.

Validating your CSS at the W3C site and then studing the tree it
returns is often instructive.

Due to popular demand, here is a URL that shows the effect I want to
avoid:

http://s161149005.onlinehome.us/DEMOS/NESTED/

There are 3 tables here. The main table holds another table in its
Cell F which hold another one-cell table in its Cell N4.

I understand that part of CSS is the "cascade", where certain
properties cascade down. But can I avoid this?

Specifically, I do not want the White Table (class="nested") to
"inherit" the padding, borders, etc. of its "parent" (class="page").
Furthermore, the 3rd table, which has no class defined at all, inherits
the dashed border from its holder (which inherited it from its holder)
and the white background from "nested".

Is there a way to avoid this? A way of over-riding the cascade from a
parent? A way to make a nested table just take on whatever properties
it has by default, as if it was not contained in a another table (from
which it is receiving "cascaded" properties)?

Thanks,
Blue Apricot 416

[Michael Fesser]

..oO(Blue Apricot)

>http://s161149005.onlinehome.us/DEMOS/NESTED/
[...]

Specifically, I do not want the White Table (class="nested") to
"inherit" the padding, borders, etc. of its "parent" (class="page").
Furthermore, the 3rd table, which has no class defined at all, inherits
the dashed border from its holder (which inherited it from its holder)
and the white background from "nested".

It's no inheritance (borders and paddings are not inherited), but simply
caused by your selectors:

TABLE.page TD {...}
TABLE.nested TD {...}

These apply to _all_ table cells that are somewhere inside tables of the
class "page" or "nested". It doesn't matter if they directly belong to
that table or if they belong to a nested table five levels deeper.

>Is there a way to avoid this? A way of over-riding the cascade from a
parent? A way to make a nested table just take on whatever properties
it has by default, as if it was not contained in a another table (from
which it is receiving "cascaded" properties)?

Without changing the code pretty much the only solution is to explicitly
apply some styles to the nested table to override the "inherited" rules:

table.page td {padding: 5px; ...}
table.nested td {padding: 0; ...}
table.nested table td {...}

Another way to apply styles only to a particular table without affecting
the nested ones are child selectors, but that won't work in IE6.
Something like

table.nested>tbody>tr>td {...}

But why is there a nested single-cell table at all?

Micha