Override the background in a HTML Table with CSS

Question

I want to override the background of a table cell with a CSS definition, using class:

<table class="adminTable">
        <thead>
        <tr>
            <th>Title</th>
            <th align="center" width="50">%</th>
            <th align="center">Actions</th>
        </tr>
        </thead>
        <tbody>
                <tr class="">
            <td>Test</td>
            <td align="center" class="IN_PROGRESS">27%</td>
            <td align="center" width="175">
                <a class="rounded-button" href="/admin/workflows/1/summary">Show</a>&nbsp;
                <a class="rounded-button" href="/workflows/delete?id=1" class="button">Delete</a>
            </td>
        </tr>
    </tbody>
</table>

The 'IN_PROGRESS' value varies with the different rows, and provides a colour indicating the status.

This is in my CSS style sheet:

.adminTable {
    width: 100%;
    border-width: 1px;
    border-spacing: 2px;
    border-style: outset;
    border-color: gray;
    border-collapse: separate;
    background-color: WhiteSmoke ;
}

.adminTable th {
    border-width: 1px;
    padding: 5px;
    border-style: dotted;
    border-color: gray;
    background-color: white;
    -moz-border-radius: 10px;
}

.adminTable td {
    border-width: 1px;
    padding: 5px;
    border-style: dotted;
    border-color: gray;
    background-color: white;
    -moz-border-radius: 10px;
}

.IN_PROGRESS{
    color:#FFFFFF;
    background: DarkOrange;
 }

Most of the time I just want the white background (and use this style all over my application), but here, and another few places I need to colour it. Is there an easy way to do this without having to duplicate the styles?

Answer 1

The problem is that .adminTable td is more specific (score {0}{1}{1}) than .IN_PROGRESS (score {0}{1}{0}).

Try td.IN_PROGRESS (score {0}{1}{1} but because it appears later in the CSS file it will win out) instead.

Answer 2

You should give complete css hierarchy for .IN_PROGRESS.

It will go as follows

.adminTable td.IN_PROGRESS {
    color:#FFFFFF;
    background: DarkOrange;
}