Question

I have multiple tables on my website.

They are each styled by the following CSS:

#content table { border: 3px solid #FFF; }
#content table tr th { color: #FFF; background-color: #2a2d32; font-size:12px;}
#content table tr td, #content table tr th { border: 1px solid #FFF; padding: 5px; text-align: center; line-height: 1.4em; font-size:12px;}

However I wish to single out a particular table for unique styling
The table in question is here:

<table cellspacing="0" cellpadding="0" width="100%" >
<tr style="background-color:#ebe7e5;">
<td>Income </td>
<td>€ </td>
<td>€ </td>
</tr>
<tr class="PL">
<td>Sales</td>
<td><?php echo $cBalance; ?>3,549</td>
<td></td>
</tr>
<th><strong>Total Income</strong></th>
<th></td>
<th><?php echo $pProductionCapacity; ?>3,705</th>
</tr>

<tr style="background-color:#ebe7e5;">
<td>Expenses </td>
<td>€ </td>
<td>€ </td>
</tr>
</table>

I have tried putting an id on this table and then trying CSS, however it seems the
main CSS (as shown above) still overrides my changes. Can someone please help?

For example I have added:

<table id="unique" cellspacing="0" cellpadding="0" width="100%" >

With CSS as follows:

#unique td th {background-color: red;}

But it’s not working.

/////////////////////////////////////////////////////////////////////////////////

Ok so I have tried changing to:

#unique td {background-color: red;}
#unique th {background-color: red;}

However the th is not changing red, it is still the grey colour from the intial CSS:

#content table { border: 3px solid #FFF; }
#content table tr th { color: #FFF; background-color: #2a2d32; font-size:12px;}
#content table tr td, #content table tr th { border: 1px solid #FFF; padding: 5px; text-align: center; line-height: 1.4em; font-size:12px;}

Answer 1

#unique td th means: “every th inside a td inside #unique”. If you mean “every td and also every th inside #unique”, what you need is #unique td, #unique th