CSS question: cascading a class style 1

gacaccia · Aug 18, 2002

not sure if the title properly worded this or not. here's my question...

can you have an html element (<td>) inherit a style based on the class of its parent.

my basic situation is that i have a page with multiple tables. on the first table, i want a special style to be applied to each cell. all other table's cells should be normal. i know that i can create a class and explicity set it for each individual cell in the first table, but is there a simpler way? is there a way to specify (using CSS) that a table's cell's should use a certain style if the table itself uses a certain style?

thanks,

glenn

onpnt · Aug 18, 2002

you can use the <span> to do this
example
<html>
<head>

<style>
.td1 TD { background-color:yellow; }
.td2 TD { background-color:red; }
</style>
</head>

<body>
<table>

<tr>
<span class="td1">
<td>blah</td>
<td>blah</td>
</tr>
</span>
<tr>
<span class="td2">
<td>blah</td>
<td>blah</td>
</span>
</tr>
</table>
</body>
</html> You cannot mandate productivity, you must provide the tools to let people become their best.
-Steve Jobs
admin@onpntwebdesigns.com

starway · Aug 19, 2002

gacaccia, I'm afraid that you cannot do this - in case of tables and table cells. If you want a real cross-browser solution, each cell style should be defined reparately as style inheritance rule doesn't work with tables.

onpnt, you have made a principle mistake.
First, you used <span> which is an inline element as a container for other elements. You have to use any block-level element for this instead.
Second, as far as I remember, separating table structure by any other elements is not allowed.

onpnt · Aug 19, 2002

starway, help me out here. When I read the question (seeing as I never tried to due this before) this what I did was the first thought that came to mind. When I attempted it, it worked very well. educate me You cannot mandate productivity, you must provide the tools to let people become their best.
-Steve Jobs
admin@onpntwebdesigns.com

starway · Aug 19, 2002

I guess you tried it out in IE only.

The issue is that <span> is an inline element and it is not allowed to contain any html formatting code. If you follow html rules strictly you do not place any <tags></tags> inside <span> - that's the way it was designed. You should use any block-level instead, like <p> or <div>.

IE interpret <span> differently - by MS developers thought, it allows to do the same as block-level elements. But it shouldn't be that way. Go to any code validator with your page and you'll see.

The same thing is for table structure - it is not allowed to place anything between <tr>'s or <td>'s - do it inside <td> or outside the entire table instead.

Test your code in any other browser (no matter what) and you'll see that styles are not applied.

gacaccia · Aug 19, 2002

onpnt and starway, thanks for responding.

onpnt, your first post did hit the mark for what i was trying to do, though i didn't use span tags. the key point that i was looking for was how to specify that a given html tag should receive a given style if contained within a given class. the syntax that onpnt provided was...

Code:

.className tagName
{
  styles
}

here's a quick example of what i wanted to do and how i implemented your example.

Code:

<html><head><title>Cell Border Test</title>
<style type=&quot;text/css&quot;>
<!-- 
td
{
 		font-size: large;
}
.clsSolidBlackBorder
{
		border-width: 1px;
		border-style: solid;
		border-color: black;
}
.clsSolidBlackBorder td
{
		border-width: 1px;
		border-style: solid;
		border-color: black;
}
-->
</style></head><body>

<table cellspacing=&quot;0&quot; class=&quot;clsSolidBlackBorder&quot;>
<tr><td>text</td><td>text</td></tr>
<tr><td>text</td><td>text</td></tr>
</table>

<table cellspacing=&quot;0&quot;>
<tr><td>text</td><td>text</td></tr>
<tr><td>text</td><td>text</td></tr>
</table>

</body></html>

on the other hand, starway does appear to be right about cross-browser issues. at least with older browsers. the above code works fine in ie6 and ns6, but doesn't work in ns4.

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

CSS question: cascading a class style 1

gacaccia

Technical User

onpnt

Programmer

starway

Programmer

onpnt

Programmer

starway

Programmer

gacaccia

Technical User

Similar threads

Part and Inventory Search

Sponsor