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.
If you're looking for a cross-browser compatible method, I'd stick to jQuery:
Example: http://jsfiddle.net/mZNGj/1/
Can you not just override it be putting the chart class after it e.g.
It seems to me this would be a good time to make use of the caption/thead/tbody/tfoot elements:
http://jsfiddle.net/Ny6YZ/
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/
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:
and set the width there:
the tds that have colspan set will not be affected by the width of the col
demo