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.
Pergunta
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>
<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?
Solução
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.
Outras dicas
You should give complete css hierarchy for .IN_PROGRESS
.
It will go as follows
.adminTable td.IN_PROGRESS {
color:#FFFFFF;
background: DarkOrange;
}