第一个表格列的 CSS 样式，但该列的第一个单元格除外

Question

所以这里是<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>

我需要为第一列设置固定宽度。很容易做到：

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

现在问题来了！ 带 JS 饼图的固定宽度螺丝。

所以我需要对所有第一个<td> 标签应用固定宽度，除了带有colspan="2" 的标签将包含我的图表。

（到目前为止）我唯一能想到的是：

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

它在所有浏览器中都给我带来了意想不到的结果。 我现在迷路了。

Answer 1

有点像cimmanon，（使用更多的表格布局助手）但有点不同：

我会尝试定义 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>
    ....

并在那里设置宽度：

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

设置了 colspan 的 tds 不会受到 col 宽度的影响

demo

Answer 2

在我看来，这将是使用 caption/thead/tbody/tfoot 元素的好时机：

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>

不过，饼图可能更适合 tfoot 而不是 thead。

或者，您可以在 colspanned 元素上覆盖它：

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

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

td[colspan] {
    width: auto;
}

Answer 3

如果您正在寻找一种跨浏览器兼容的方法，我会坚持使用 jQuery：

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

示例：http://jsfiddle.net/mZNGj/1/

Answer 4

你能不能只覆盖它，将图表类放在它之后，例如

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

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