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.

What are the unexpected results ? Seems to work fine for me. fiddle: [http://jsfiddle.net/vals/aYeg9/] — vals, Apr 04 '13 at 15:40

score 5 · Accepted Answer · answered Apr 04 '13 at 15:26

5

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

answered Apr 04 '13 at 15:26

matpol

3,042
1
15
18

I try to avoid the use of !important as it will screw up the 'cascade' one of css' raison d'etres. – matpol Sep 27 '13 at 07:50

score 1 · Answer 2 · answered Apr 04 '13 at 15:27

1

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/

answered Apr 04 '13 at 15:27

chrx

3,524
1
15
17

So.. in my case it would be `$('td:first-child:not([colspan=2])').css('width', '250px');`? – rinchik Apr 04 '13 at 15:30
If you develop for IE9+ or read this answer when that browser is dominant, a CSS only solution should be preferred instead of a javascript solution (unless browser support is an issue as it is here) – dtech Apr 04 '13 at 15:36
A CSS solution would be great but IE8 usage is sadly still at 10% of the global market. – chrx Apr 04 '13 at 15:39

cimmanon · Answer 3 · 2013-04-04T15:49:37.593

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

I have many tables. So tried the alternative solution `td[colspan]`: Mozilla: http://screencast.com/t/hlC4zGkVMcMD , IE,CHROME: http://screencast.com/t/OYaZHxBZ4C . Weird. huh? — rinchik, Apr 04 '13 at 15:54
Examples aren't meant to be copied verbatim. You need to modify the selectors to be more specific if the styles aren't meant to be applied to all tables: `.census td[colspan]`, etc. — cimmanon, Apr 04 '13 at 16:36

score 0 · Answer 4 · answered Apr 04 '13 at 20:25

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

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

4 Answers4

demo

Linked