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

Question

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 1

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

Answer 2

If you're looking for a cross-browser compatible method, I'd stick to jQuery:

$('td:first-child:not([colspan=2])').css('width', '250px');

Example: http://jsfiddle.net/mZNGj/1/

Answer 3

It seems to me this would be a good time to make use of the caption/thead/tbody/tfoot elements:

http://jsfiddle.net/Ny6YZ/

tbody td:first-child {
    width: 250px;
}

<table class='census'>
    <caption>My Title</caption>

    <thead>
        <tr>
            <td colspan="2" class='chart'>SOME PIE CHART, GENERATED WITH JS</td>
        </tr>
    </thead>

    <tbody>
        <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>
    </tbody>
</table>

Though, the pie chart might be better suited for the tfoot rather than thead.

Alternately, you could just override it on the colspanned elements:

http://jsfiddle.net/Ny6YZ/1/

td:first-child {
    width: 250px;
}

td[colspan] {
    width: auto;
}

Answer 4

A little bit in the line of cimmanon, (using more the table layout helpers) but a little different:

I would give a try to define cols:

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

and set the width there:

.col1 {
    background-color: papayawhip;
    width: 250px;
}

the tds that have colspan set will not be affected by the width of the col

demo