table周りのCSSを効率よく設定したい

やりたかったこと

↑こういう偶数行にうすい色をつけるパターンの実装をするときにtable要素のCSSについてしらべたのでメモです。

まず見出しセル(th)が1行(tr)にまとまっている場合と、trが各行(tr)にまたがっている場合があります。

見出しセルが一行の場合

前者はtrでテーブル要素内のツリーとして扱われるので tr要素に .odd/.evenなどをつけてbackground-colorを指定すればよさそうです。

table tr.even {
    background:#fff0f0;
}

※再現できないけど、まれにtrにbackground指定してもIE7で反映されないことがあったので、そのときは下記のように列への指定をすれば確実にできます。

table .even,
table .even td {
    background:#fff0f0;
}

見出しセルが各列にまたがる場合

次に列ごとの幅を調整するときに、すべての行のth, tdにクラスをつけると死にますのでグルーピングする要素がほしいなーというところにcolgroupという要素があるようなので調べてみました。

次の記事が詳しいのですが、ブラウザによって反映できるプロパティが違うようです。
http://www.d-spica.com/try/colgroup.html

th，tdはcolgroupの子孫要素ではない

th，tdはcolgroupの子孫要素ではないので，colgroupに指定したtext-align，font-weight，colorなどの値はth，tdに継承されないはず。
colgroupは内容を持たないただの領域。これが列として並んだ複数のセルと重なっているだけ。
th，tdを子孫要素のように扱うIE6,7の挙動が正しくない。

とういうことで、結論からいうと、幅と背景ならcolgroupで一括して管理できそうです。

今回の要件であれば十分そうですが、もしテキストの色やpaddingや整列を変えたい場合は各th, tdにクラスをつけるような泥臭いやり方をするしかないようです。

<table>
    <tr>
        <th class="first">●●●●</th>
        <th class="second">●●●●</th>
        <th class="thard">●●●●</th>
    </tr>
    <tr>
        <td class="first">◯◯◯◯◯</td>
        <td class="second">◯◯◯◯◯</td>
        <td class="thard">◯◯◯◯◯</td>
    </tr>
</table>

最終的なHTML/CSS

index.html

<table>
    <colgroup class="first"></colgroup>
    <colgroup class="second"></colgroup>
    <tr>
        <th>●●●●●●</th>
        <th>●●●●</th>
    </tr>
    <tr class="odd">
        <td>◯◯◯◯◯</td>
        <td>◯◯◯◯◯◯</td>
    </tr>
    <tr class="even">
        <td>◯◯◯◯◯</td>
        <td>◯◯◯◯◯◯</td>
    </tr>
    <tr class="odd">
        <td>◯◯◯◯◯</td>
        <td>◯◯◯◯◯◯</td>
    </tr>
    <tr class="even">
        <td>◯◯◯◯◯</td>
        <td>◯◯◯◯◯◯</td>
    </tr>
</table>

<table>
    <colgroup class="head"></colgroup>
    <colgroup class="first odd"></colgroup>
    <colgroup class="second even"></colgroup>
    <colgroup class="thard odd"></colgroup>
    <tr>
        <th>●●●●●●</th>
        <td>◯◯◯◯◯</td>
        <td>◯◯◯◯◯</td>
        <td>◯◯◯◯◯</td>
    </tr>
    <tr>
        <th>●●●●</th>
        <td>◯◯◯◯◯◯</td>
        <td>◯◯◯◯◯</td>
        <td>◯◯◯◯◯</td>
    </tr>
    <tr>
        <th>●●●●●●</th>
        <td>◯◯◯◯◯</td>
        <td>◯◯◯◯◯</td>
        <td>◯◯◯◯◯</td>
    </tr>
    <tr>
        <th>●●●●</th>
        <td>◯◯◯◯◯◯</td>
        <td>◯◯◯◯◯</td>
        <td>◯◯◯◯◯</td>
    </tr>
</table>

index.scss

table {
    border:1px solid #666;
    border-collapse: collapse;

    th,
    td {
        border:1px solid #666;
        padding: 5px 8px;
    }

    th {
        background:#dcdcdc;
    }

    .even {
        background:#fff0f0;
    }

    .first {
        width:40%;
    }

    .head {
        width:20%;
    }
}

追記

先ほど気づいたのですが、colgroupの幅の指定は%じゃないと効かないようです。

    .head {
        width:20%;// OK
    }

    .head {
        width:200px;// 効かない
    }