Feeling a bit puzzled by another answer on SO...
I have two tables, with one nested inside the other. (a table within a table)
<table class="master">
<tr>
<td>ID</td><td>Name</td><td>Information</td>
</tr>
<tr>
<td>1</td>
<td>John</td>
<td>
<table class="detail">
<tr>
<td>ID</td><td>Order</td>
</tr>
<tr>
<td>1</td><td>CA09-WYOMING-BR</td>
</tr>
</table>
</td>
</tr>
</table>
Regarding styling...
<style>
table.detail{
border:1px solid red;
border-collapse: collapse;
/* etc...around 20 lines of code */
}
table.detail td{
border:1px solid red;
background:red;
/* etc...around 20 lines of code */
}
table.master {
border:1px solid black;
border-collapse: collapse;
}
table.master td {
border:1px solid black;
background:gray;
}
</style>
The style of the detail table is not displaying correctly due to being overridden by the parent table's CSS. I'm aware of using the !important tag to prevent this, but should I add it to all 20 lines of CSS code?
Any suggestions?