CSS used in tables

[Steve Swift]

I'm quite new to CSS. I use the easy bits (I can make the text on my
buttons red) and I'm slowly learning more.

I have a website that uses two styles of <TABLE>s - No borders, and thin
borders. Until now I managed this without CSS (I and my sites pre-date
CSS) but everyone tells me I should use CSS, so I'm trying.

I created two classes: NoBorder and Thin, which work fine on individual
tables.

Then I tried a table without borders inside one cell of a table with
thin borders. Before anyone shouts at me, I'm using TABLEs for tabular
data, not positioning.
You can see the result at: http://swiftys.org.uk/csstable.html - it's
the table with double borders.

The inner (NoBorder) table displays with the borders from the containing
table (Thin). This is contrary to every language/mark-up scheme I've
encountered in forty years of computing. The more local definition is
ignored in favour of the more remote one.

Is there something I can do to get it to work the way I would expect it to?

Someone gave me a suggestion that would probably work in Opera (Based on
CSS2), but is unlikely to work before Internet Explorer 8, so that's not
much use to me, where 70% of my users have IE6.

--
Steve Swift
http://www.swiftys.org.uk/swifty.html
http://www.ringers.org.uk

[Tim Rivera]

> Then I tried a table without borders inside one cell of a table with thin

> borders. You can see the result at: http://swiftys.org.uk/csstable.html -

> it's the table with double borders.
>
> The inner (NoBorder) table displays with the borders from the containing
> table (Thin).

Yeah, the result isn't what you'd expect in this circumstance. However, it
comes down to the cascading order. Because you have the "table.NoBorder td"
selector before the "table.Thin td" selector, "table.Thin td" overrules
"table.NoBorder td".

"Finally, sort by order specified: if two declarations have the same weight,
origin and specificity, the latter specified wins."
http://www.w3.org/TR/CSS21/cascade.html#cascading-order

If you switch around the selectors to be in order of preference (i.e. the
cascade order), you will see the desired results. Or, you could increase the
specificity of "NoBorder" by using "table.Thin table.NoBorder td".

Tim

[Steve Swift]

Tim Rivera wrote:
> If you switch around the selectors to be in order of preference (i.e. the
> cascade order), you will see the desired results. Or, you could increase the
> specificity of "NoBorder" by using "table.Thin table.NoBorder td".

Thank you for your suggestion. I cannot rely on the order, because I can
imaging it being the other way around somewhere else on my site, so I'd
get the same problem but the other way around.

So, I could change the specificity, but I confess that I don't
understand how that works, or what/where I'd change it, and I'm
uncomfortable using something I don't understand. I'll carry on looking
at it; maybe if I look at it long enough I'll see how it works.

[Andrew Gregory]

On Mon, 26 Nov 2007 03:51:13 +0900, Steve Swift <Steve....@gmail.com>
wrote:

> Tim Rivera wrote:
>> If you switch around the selectors to be in order of preference (i.e.
>> the cascade order), you will see the desired results. Or, you could
>> increase the specificity of "NoBorder" by using "table.Thin
>> table.NoBorder td".
>
> Thank you for your suggestion. I cannot rely on the order, because I can
> imaging it being the other way around somewhere else on my site, so I'd
> get the same problem but the other way around.
>
> So, I could change the specificity, but I confess that I don't
> understand how that works, or what/where I'd change it, and I'm
> uncomfortable using something I don't understand. I'll carry on looking
> at it; maybe if I look at it long enough I'll see how it works.
>

See: http://css-discuss.incutio.com/?page=SelectorSpecificity

I would make a slightly different recommendation. You've currently got
selectors like "table.NoBorder td" and "table.Thin td". What I would try
is:

table.NoBorder td, table table.NoBorder td, table table table.NoBorder td {
}
table.ThinBorder td, table table.ThinBorder td, table table
table.ThinBorder td {
}

adding extra table selectors makes the selector more specific. You will
need as many extra table's as you expect to nest tables. The above will
handle up to three nested tables.

For example, you have a NoBorder table inside a ThinBorder table. The
table cells of both tables will match "table.ThinBorder td", but "table
table.NoBorder td" is more specific and properties in it will override
properties in the former.

HTH,
--
Andrew Gregory
<URL: http://www.scss.com.au/family/andrew/ >

[Steve Swift]

Andrew Gregory wrote:
> See: http://css-discuss.incutio.com/?page=SelectorSpecificity

Thanks, I'll go and have a look at that. I'm sure it will become clear
once I understand the underlying mechanism. Now's a good time for
learning; I forgot a significant† amount of what I knew last Friday, so
presumably there's more free space in my brain now… :-)

† Significant amount: a few percent. I keep coming across stuff that I
knew last week that is now hazy. Like where my Windows Media Player icon
is (I've since re-learned that its in the most prominent place in my
Quick Launch toolbar, but I had to look for it; strange for something
that I use each and every day)