I am facing a CSS issue where I have nested tables with different colors based on the data inside them. I assigned a class to each table, but the color depends on the order in which the classes are declared in the CSS. If color 1 is declared before color 2, it will override the child color.
Here is 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;
}
If you swap Grid1 and Grid0, the colors will not display correctly.
JSFiddle sample:
The first table starts with Grid0 and the second with Grid1. The second table should be red/blue.
Thank you for any assistance you can provide.