Newbie: problems formatting tables within a DIV

Top-level style works; DIV style class doesn't work

[bOOyah]

Hi all.

CSS virgin here. This is a question about achieving the desired formatting for table cells and borders. It's for a web app and I'm using auto-generated tables to display data results.

I have a table in a DIV, like so:

<div><table>
....
</table></div>

When I apply this css I get the results I expect, namely a single, 1px tan border around the table and each cell:

html, body {
margin: 0;
padding: 0;
font-family: Verdana, Helvetica, Arial, sans-serif;
font-size: 8pt;
color: black;
background-attachment: fixed;
}

table {
border-collapse: collapse;
border: 1px solid #E6DDD4;
border-spacing: 0;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 8pt;
font-style:normal;
color: #333333;
text-align: left;
}

th {
padding: 2px 4px;
border: 1px solid #E6DDD4;
background-color: #EFEAE7;
font-weight:bold;
color: #ff8000;
}

td {
padding: 2px 4px;
border: 1px solid #E6DDD4;
}

Pretty dull stuff; just a basic grid.

But I don't want to apply that style to all my tables, only to tables of a certain type (or 'class'...a-ha!). So I modify my HTML and table-CSS thus:

<div class="table"><table>
....
</table></div>

...

div.table {
border-collapse: collapse;
border: 1px solid #E6DDD4;
border-spacing: 0;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 8pt;
font-style:normal;
color: #333333;
}

div.table th {
background-color: #EFEAE7;
border: 1px solid #E6DDD4;
text-align: left;
font-weight:bold;
color: #ff8000;
padding: 2px 4px;
}

div.table td {
text-align:left;
border: 1px solid #E6DDD4;
padding: 2px 4px;
}

And I don't see what I expect. Now each cell gets its own little inner border, and my fonts got bigger.

Errrmmm...help please?
--
bOOyah

[AWildman]

That's because you're being too specific.

If you want only the outer table to have borders, then do

div.table{borders:...}

If you want the properties to apply to the cell, THEN do

div.table td{property: value;}

[grahamstewart]

Why bother with the div?
Just style the table directly.

[bOOyah]

Hi AWildman

I want the 2nd style (the div style) to behave the same as the first one (the global style). My frustration arises because I don't know why the div style does not produce exactly the same results as the global one.

Thanks.
--
bOOyah

[AWildman]

You haven't can't use table as a class. If you want the div to be the same as table, write the css as follows

div, table
{
property: value;
.
.
.
}

[bOOyah]

Thanks for the advice guys. I've got it working nicely now. And I deleted that DIV ;)

Maybe you could clear up some of my confusion.

Is this correct?
div.table {...} - apply this style to <table> in this div.
div.table th {...} - apply this style to the table header row in this div. This style inherits all the styles from the div.table selector.

I presume this isn't correct? I think I've been assuming that cascading implies inheritance. You can tell I'm a programmer not a designer, can't you? ;)

Thanks.
--
bOOyah

[brucec]

bOOyah, you could still use the <DIV> and only on certain tables by applying the class name to your selector.

So, if your class name for the table with the special formatting is called "Special", then your selector can be:

td.special {
all CSS formatting
}

That would definitely work. :)

[SuzyUK]

Hi bOOyah.. Welcome to WebmasterWorld

Is this correct?
1. div.specific {...} - apply this style to <table> in this div.
2. div.specific th {...} - apply this style to the table header row in this div.

Note I've changed the class name not because you have to but because I think it will be easier for you to see why number 1 is not working (and it's makes explaining it easier ;)) ~ that style will only be applied to the actual div with the class name of "specific"

No.2 however is correct the style will be applied to any th who's parent (or other direct ascendant) is div class="specific". This is where the inheritance comes in ;)

The actual full CSS required should be (before shorthand that is..)

div.specific table {styles}
div.specific table th {styles}
div.specific table td {styles}

start reading it from right to left.. you're putting the styles on the element whose parent element is... whose parent element is... etc..

Then with the the second two styles they will still be right by missing out the table (your HTML table) in this case because the th, td are specific enough to be targetted by themselves.. in the first one you're simply not targetting the HTML table... only the div.

in the same way you can lose the div and still target the table by putting the class name directly onto the table as grahamstewart mentioned above, and you still won't need to put class names on each and every th, td element in the HTML.. just on the table

<table class="mytable">
.....
</table>

CSS:

table.mytable {styles}
table.mytable th {styles}
table.mytable td {styles}

Suzy

[bOOyah]

Hi Suzy

You've helped enormously. You ought to think of writing a book on this subject. The one I bought left me reeling; I had more questions than answers after reading it.

Thanks again to everyone who replied!

--
bOOyah

[sa22112]

Okay, so now to add to bOOyah's question: How can I get this to work in Netscape?

Any help would be much appreciated.

Yours,
Floundering CSS newbie

[SuzyUK]

Hi sa22112 - Welcome to WebmasterWorld

You've crept in the back door ;)

Not sure what's not working for you in Netscape as this discussion is wee bit dated and I think booyah got it all sorted ..

If you want to post your code snippets (remove unneccesary formatting stuff) we'll see if we can help from there..

Suzy