HOME > NOTEBOOK > Web > 表組の奇数行／偶数行で色分けするCSS3/JS

NOTEBOOK

表組の奇数行／偶数行で色分けするCSS3/JS

投稿日：

CSS3では、:nth-child疑似クラスがサポートされました。これを使うと、表組などで奇数行、偶数行それぞれに背景色を付けることなどが簡単にできます。

ただし対応しているブラウザはFireFox3.6, Safari4+, Chrome5+, Opera10.6で、IE6,7,8は対応していません。

しかしながらIEには簡単なJavaScriptで対応することができます。

サンプルはこちら。

CSS3での指定は以下のようになります。

tr:nth-child(odd) td {
    background-color: #fdfff3;   /* 奇数行の背景色 */
}
tr:nth-child(even) td {
    background-color: #f8f8f8;   /* 偶数行の背景色 */
}

IEではJavaScriptでTR要素にoddクラスやevenクラスを付けます。（後述）
上記のCSS3の記述はIEでは無視されるので、IE用として以下のCSSを記述します。

tr.odd td {
    background-color: #fdfff3;
}
tr.even td {
    background-color: #f8f8f8;
}

IEには奇数行にoddクラス、偶数行にevenクラスを付加するためのJavaScript（jQuery）を作成します。

jQuery(function($){
    $("tr:nth-child(odd)").addClass('odd');
    $("tr:nth-child(even)").addClass('even');
});

1行目は $function(){ でもいいのですが、他のプラグインとのコンフリクトを避けるためにこのような記述にしています。

上記のJavaScriptはIEのみに読み込ませればいいので、HTMLファイルのHEAD要素内に条件付きコメントで記述します。（jQueryも忘れずに！）

    <!--[if IE]>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
        <script type="text/javascript" src="js/ie.separate.js"></script>
    <![endif]-->

サンプルはこちら。

補足

JavaScriptを下記のように記述すると、別途IE用のCSSは必要ありませんが、CSSとJavaScriptを明確に分離しておいたほうが、後のメンテナンスなどがしやすいでしょう。

$(function(){
    $("tr:nth-child(odd)").css("background-color","#fdfff3");
    $("tr:nth-child(even)").css("background-color","#f8f8f8");
});