CSS used in tables

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

> 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 

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.

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

On Mon, 26 Nov 2007 03:51:13 +0900, Steve Swift <Steve.J.Swift@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

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)

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