I have a css problem. I got an table inside anther table. each table have a different color (depending data inside). So I put a class for each table. but the color depend when the class is set on css. I mean if color 1 is declare before the second, it will override the child color.
I made a sample : http://jsfiddle.net/b8T6V/2/ (complete version)
<table border="0" class="Grid0">
<tr class="even">
<td>table 1, row 1</td>
</tr>
<tr class="even">
<td>
<table border="0" class="Grid1">
<tr class="even">
<td>table 2, row 1</td>
</tr>
<tr class="odd">
<td>table 2, row 2</td>
</tr>
</table>
</td>
</tr>
<tr class="odd">
<td>table 1, row 2</td>
</tr>
<tr class="odd">
<td>
<table border="0" class="Grid1">
<tr class="even">
<td>table 2, row 1</td>
</tr>
<tr class="odd">
<td>table 2, row 2</td>
</tr>
</table>
</td>
</tr>
</table>
table.Grid0 tr.even
{
background-color: RED ;
}
table.Grid0 tr.odd
{
background-color: BLUE;
}
table.Grid1 tr.even
{
background-color: BLACK;
}
table.Grid1 tr.odd
{
background-color: WHITE; /*background-color: blue;*/
}
If you use Grid1 instead of Grid0, and Grid0 instead of Grid1. That will not work.
jsfiddle sample:
The first table start with Grid0 and the second with Grid1. The second should have table in red/blue.
Thank you for your help
Because your inner
tris inside two tables, one of classGrid0and one of classGrid1then both sets of CSS rules apply, so (since they appear later on in the file) the back/white background colours take precedence.The easiest way to fix this is to insert
> tbody >in to all of the relevant rules, so that only the class of the parent table is considered and not any other ancestor tables.