0

だからここにある<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;
}

すべてのブラウザーで予期しない結果が得られます。私はこの時点で迷っています。

4

4 に答える 4

5

後でチャートクラスを配置してオーバーライドすることはできませんか

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

    .census td.chart {
      width: auto;
      etc...
    }
于 2013-04-04T15:26:59.153 に答える
1

クロスブラウザー互換のメソッドを探しているなら、私は jQuery に固執します:

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

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

于 2013-04-04T15:27:59.953 に答える
1

これは、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>

ただし、円グラフは、tad よりも tfoot に適している可能性があります。

または、colspanned 要素でオーバーライドすることもできます。

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

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

td[colspan] {
    width: auto;
}
于 2013-04-04T15:38:27.083 に答える
0

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 は、列の幅の影響を受けません。

デモ

于 2013-04-04T20:25:36.633 に答える