Preventing tables from inheriting class properties

[rdwyer]

Hello list.

I have a table within a table. The external table has class settings that control how the individual cell and row borders display.

Within a cell I have another table but I do not want it to inherit the values of the table it is in. I have tried to set the inside table to its own class with different settings but it did not work. I would think this could be done, but haven't quite been able to find the solution.

Any help with this is appreciated.

--Rick

<table border="0" class="myclass">
<tr><td>

<table border="0" cellpadding="4" cellspacing="4">
<tr><td>Some Text</td></tr>
</table>

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

[Tourz]

I was dealing with this recently and ended up replacing the outer table with a div. It keeps things more simple. You can float:left multiple tables within a div to arrange them side-by-side.

Having said that, you should be able to counteract everything higher on your style sheet by duplicating rules with different values. Usually something is just being overlooked.

Also, different browsers often display different results and may need two different rules to accomplish the same thing (padding, margin etc). Happy tweaking!

[Tourz]

o ya, welcome to WW!

[rocknbil]

Well, a table within a table is a bad idea for accessibility reasons. Barring that, did you try

.myclass td table td { padding: 6px; background-color: #ffffff; }

?

Something else is afoot though, if you assigned a second class to the inner table, it should have worked.

.myclass td { padding: 12px; background-color: #ff0000; }
.innertable td { padding: 6px; background-color: #ffffff; }

<table border="0" class="myclass">
<tr><td>
<table class="innertable" border="0" cellpadding="4" cellspacing="4">
<tr><td>Some Text</td></tr>
</table>
</td></tr>
</table>

I just tested both of these and they work as expected, are you using a valid document type?