CSS: Unique styling of a table

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

did you try table #unique td th {background-color: red;}

Flowerking
– Flowerking

2012-02-02 14:54:45 +00:00
Commented Feb 2, 2012 at 14:54 — Flowerking
– Flowerking, Commented Feb 2, 2012 at 14:54
Can you put all your CSS code?

eveevans
– eveevans

2012-02-02 15:19:13 +00:00
Commented Feb 2, 2012 at 15:19 — eveevans
– eveevans, Commented Feb 2, 2012 at 15:19
Why? The problem has been solved below

NeverPhased
– NeverPhased

2012-02-02 15:21:30 +00:00
Commented Feb 2, 2012 at 15:21 — NeverPhased
– NeverPhased, Commented Feb 2, 2012 at 15:21

Mr Lister · Accepted Answer · 2012-02-02 14:54:58Z

6

#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

answered Feb 2, 2012 at 14:54

Mr Lister

46.8k15 gold badges118 silver badges156 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Mr Lister Over a year ago

It can be... if you have nested tables.

punkrockbuddyholly · Accepted Answer · 2012-02-02 15:15:08Z

2

Because you have been so specific with your selectors for all the tables you may have to be even more specific for your unique table like this:

#content table#unique tr td, #content table#unique tr th { ... }

Really the table in your selector is redundant as a tr, td and th are always in a table. You could make your selectors simpler by doing:

#content th, #content td { ... }

and then your unique table would be:

#content #unique th, #content #unique td { ... }

Edit

Here's a jsfiddle of what I mean http://jsfiddle.net/BNV22/

You either need to lose the unnecessary table tr from your selectors or you need to keep the selectors the same but add table#unique to the rules that you want to apply to your unique table.

edited Feb 2, 2012 at 15:15

answered Feb 2, 2012 at 14:58

punkrockbuddyholly

9,8147 gold badges41 silver badges72 bronze badges

2 Comments

punkrockbuddyholly Over a year ago

In your edit you haven't done what I suggested you do. That's why it still doesn't work.

NeverPhased Over a year ago

Thank you that has fixed everything, if I could give two accepted answers I would!

eveevans · Accepted Answer · 2012-02-02 14:57:57Z

0

You could use #content table#unique , and you have to put this code after the #content table rule

or you could simple omit the #content for your normal tables

answered Feb 2, 2012 at 14:57

eveevans

4,4702 gold badges33 silver badges39 bronze badges

Collectives™ on Stack Overflow

CSS: Unique styling of a table

Ok so I have tried changing to:

3 Answers 3

1 Comment

Edit

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Ok so I have tried changing to:

3 Answers 3

1 Comment

Edit

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related