Question

I have a problem with styling a single table cell. Here is an example code illustrating my problem:

<style>
#bltable { border-collapse:collapse; width:575px;
    -moz-user-select:none;}
#bltable tr.row1 {background-color:#eff3f7;}
#bltable tr.row2 {background-color:#ffffff;}
#bltable tr.fotm td {background-color:#ffffd9;}
#bltable td.op td {background-color:#f2f2c3;}
</style>
<table id="bloodlines">
    <tr class="row1">
        <th>1</th>
        <th>2</th>
        <th>3</th>
        <th>4</th>
    </tr>
        <tr class="row2">
        <td>sup</td>
        <td>sup</td>
        <td class="op">sup</td>
        <td>sup</td>
    </tr>
    <tr class="fotm">
        <td>sup</td>
        <td>sup</td>
        <td>sup</td>
        <td>sup</td>
    </tr>
</table>

As you can see the table has two main colours (row1 and row2) that change each row (checkboard style).
The table also has a “flavour of the month” row with an additional third color.
Lastly the table has a single td class=”op” that will be a fourth color.

The problem I’m having is that row1, row2 and the fotm class overrides the “op” class color and the fourth color is not shown. Can I write this any differently to make it work?

I’ve tried:

#bltable tr.row1 

(without “td” in the end) but then I get no row color at all, seeing as “X is not inherited. It is applied to an enclosing tag”

Furthermore, Im not sure wether its necessary to have the extra “td” at the end of

#bltable td.op td {}

given that td.op should take care of that part.. In principle shouldn’t only

.op {}

be enough?

Any ideas?

Answer 1

You need to change this line in your css

#bltable td.op td {background-color:#f2f2c3;}

to this

#bltable tr td.op {background-color:#f2f2c3;}

You had two tds and the .op on the first.

Example: http://jsfiddle.net/jasongennaro/LdSM3/