I have several tables on my site and I am styling them using

a global style for th, td, tr etc.

 

However I wish to single out one of these tables and apply a unique border. How do I do this?

 

That is my css for ALL tables:

 

#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;}

 

 

and here is the html for the table in question:

 

<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>
	<tr >
		<td>Other</td>
			<td><?php echo $cMarketShare; ?>156</td>
			<td></td>
	</tr>
	<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>

 

Thanks for the input,

Webrookie

Edited February 2, 201214 yr by Renaissance-Design
Please use the code button or tags to format your code.

Give the table an ID and target that with your style declarations. Any rules you set on #content #uniquetable will override #content #table because an ID selector is more specific than an element.

Edited February 2, 201214 yr by Renaissance-Design

 

#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;}
#content #uniqueref table { border: 3px solid #CCC; }

 

 

What he said, something like this however if you need two tables out of 10 in a page to be different then go for class over id.