CSS <table> Inheritance

Rocker · 4 Nov 2010 at 16:39

I have a nested table, when applying a style to the outer table, it also applys to the inner table ad for the life of me I cant figure out how to stop it :S e.g.:

<table id="outter">
<tr>
<td>Hello</td>
<td>

<table class="inner">
<tr>
<td>Goodbye</td>
</tr>
</table>

</td>
</tr>
</table>

table#outter
{
text-align:left;
vertical-align:top;
}

table#outter tr td
{
border-style:solid;
border-width: 1px;
border-color:rgb(175,175,175);

border-collapse: collapse;
border-spacing:0;
}

I thought by ading styles to the inner table it would remove the inheritance but, apparently not!

table.inner
{
padding-left:25px;
text-align:left;
vertical-align:top;
}

table.inner tr td
{
text-align:left;
vertical-align:top;
border-style:solid;
border-width: 0px;
}

It's been a while since I have done CSS and HTML but I seem to remember that you could use '>' to tell the table to only apply the style to its own tr, td?

Basically because I set a border on the outter table, it sets one on the inner table too and I do not want one on the inner table. Can anyone help?

Rocker · 4 Nov 2010 at 17:04

Spunkey said:
The only solution to this is to set the style for both your inner and outer table separately.

For example, if you wanted a border on your outer table, but not on the inner table, you'd do something like

Code:

TABLE TR TD { border: 1px solid #CCC; } TABLE TR TD TD { border: 0; }

Is this not what I have already done when I add the style for no border to the inner table? It does not seem to work.

Rocker · 4 Nov 2010 at 17:08

Koalaboy said:
Was this a typo:

table.innter

If not... that could be the problem

Haha yes that is a typo

- changed!

They styles def apply to the inner table as it adds the left padding.

Rocker · 4 Nov 2010 at 17:23

Koalaboy said:
Well you're still not overriding the border-width and border-style on the table... only on the td and tr, but you set it on the outer table... is this what you meant ?

Try setting the border-width and border-style against table.inner

Yes,

If i set the following styles on the inner table, I still get the border :S

border-style:none;
border-width: 0px;

EDIT:

Its not actually the border on the table because the table does not have a boreder, its the border on the TR and TD

Rocker · 4 Nov 2010 at 17:47

I guess I want a border around the cells on the outer table but no border at all on the inner table:

I currently have this:

Rocker · 4 Nov 2010 at 20:56

lemonade said:

I was playing around with the code you gave, and it seems to work for me if I understood your problem correctly.

HTML:

Code:

<html>
<head><title> Hello</title> 
<link rel="stylesheet" type="text/css" href="css.css">

</head>
<body>
<table id="outter">
<tr>
<td>
<table>
<tr>
<td>Hello</td>
<td>
<tr>
<td>Hello</td>
<td>
<tr>
<td>Hello</td>
<td>
</table>
</td>
</tr>

<tr>
<td>
<table class="inner">
<tr>
<td>Goodbye</td>
</tr>
<tr>
<td>Goodbye</td>
</tr>
<tr>
<td>Goodbye</td>
</tr>
<tr>
<td>Goodbye</td>
</tr>
</table>
</td>
</tr>
</table>

</body>

</html>

CSS

Code:

table#outter
{
border-style:solid;
border-width: 1px;
border-color:rgb(175,175,175);
text-align:left;
vertical-align:top;
}

table#outter tr td
{
border-collapse: collapse;
border-spacing:0;
}
table.inner
{
padding-left:25px;
text-align:left;
vertical-align:top;
}

table.inner tr td
{
text-align:left;
vertical-align:top;
border-style:none;
border-width: 0px;
}

This is correct, it does work. However, my appologies, I made a mistake in the OP. I actually want the border arround the outter TRand TD only.

I have edited the OP, sorry for confusion.

Rocker · 4 Nov 2010 at 22:24

The problem is resolved if I give the inner table an ID and style it by its ID rather than a class, but I intend to have a number of inner tables and should not give more than one table the same ID.

Rocker · 4 Nov 2010 at 22:59

Mattus said:
What is happening here is that the style rules you've given to #outter are overriding those you've given to .inner. This is happening because when CSS rules conflict, the most specific rule always gets applied, and an ID is more specific than a class is.

To solve it, you need to make the selector for .inner more specific than the one for #outter. Change this:

Code:

table.inner tr td

to this:

Code:

table#outter table.inner tr td

Because that's more specific than your other selectors (as it has an ID and a class in it), it will take precedence.

Fantastic, that worked perfectly! Thanks for the explanation too, I get it now