table カラムの colspan と nth-child の相性問題

この記事のテーブルレイアウトで苦労したのでメモ。

例えば、列数 ＞ 2 のテーブルの先頭 2 列を色指定したい場合、nth-child を使うと簡単にできる。
[CSS]

/* td と th の先頭 2 列を指定 */
td:nth-child(-n+2), th:nth-child(-n+2) {
    background-color: purple;
}

しかし、先頭 2 列に colspan=2 が含まれる場合・・・
[HTML]

<table>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
    <tr>
        <td colspan=2>1-2</td>
        <td>3</td>
    </tr>
</table>

nth-child は colspan を考慮してくれないため、破綻する。
[プレビュー]

1	2	3
1-2		3

解決手段

まず、<colgroup> と <col> を使ってスタイルを指定する方法がある。
◇cssでセル幅を指定するとcolspanで破綻する: 万象酔歩 にくわしく説明されているので、ここでは割愛。

基本的には上記でいいのだが、<td> や <th> に既にスタイルを割り当てている場合、<colgroup> が使えない。
<colgroup> と <col> では、 !important を指定しても <td> と <th> のスタイルを上書きできない。

もう 1 つの方法として、非表示の <td> <th> を利用して、nth-child を適用する方法がある。
[HTML]

<table>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
    <tr>
        <td colspan=2>1-2</td>
        <td style="display:none"><!-- 非表示カラム --></td>
        <td>3</td>
    </tr>
</table>

[プレビュー]

1	2	3
1-2			3

非表示要素を使うのは微妙だが、対象のカラムすべてに class を書いたりするよりはましである。

その他

Selectors Level 4 の Column combinator が実装されれば、こんな工夫はいらなくなるはず。