css - 第一个表格列的 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

您是否可以不只是覆盖它，将图表类放在它之后，例如

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

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

Answer 2

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

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

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

Answer 3

在我看来，这将是使用 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 4

一点点在 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 宽度的影响

演示