rinchik rinchik - 1 month ago 10
CSS Question

CSS style for first table column except first cell of that column

So here is the

<table>
:

<table class='census'>
<tr>
<th colspan="2">My Title</th>
</tr>
<tr>
<td colspan="2" class='chart'><SOME PIE CHART, GENERATED WITH JS></td>
</tr>
<tr>
<td>Some title</td>
<td>Some Data</td>
</tr>
<tr>
<td>Some title</td>
<td>Some Data</td>
</tr>
<tr>
<td>Some title</td>
<td>Some Data</td>
</tr>
<tr>
<td>Some title</td>
<td>Some Data</td>
</tr>
<tr>
<td>Some title</td>
<td>Some Data</td>
</tr>
</table>


I need to set fixed width for the first column. It could easily be done:

.census td:first-child {
background-color: #F0F8FE;
width: 250px;
}


Now the problem!
Fixed width screws with JS PIE CHART.

So i need to apply fixed width to all first
<td>
tags except one with
colspan="2"
that will contain my chart.

The only thing i could come up with (so far) if this:

.census td:first-child:not(.chart) {
background-color: #F0F8FE;
width: 250px;
}


It brings me unexpected results in all browsers.
I'm lost at this point.

Answer

Can you not just override it be putting the chart class after it e.g.

   .census td:first-child {
        background-color: #F0F8FE;
        width: 250px;
    }

    .census td.chart {
      width: auto;
      etc...
    }