テーブルの偶数行又は奇数行の背景色を変えて縞模様にする

Tweet

Share on Tumblr

YahooのCSSフレームワーク「Pure」のストライプテーブルは、実現のさせ方がちょっと面倒(全部の奇数行のtrに「class=”pure-table-odd”」をつける)だったので、tableにclassを設定すればOKな記述を、Pureと併用する自作の方のCSSに追加することにしました。

■Pure使ってる人のテーブル記述

<table class="pure-table stripe-table">
<tr><th>列1</th><th>列2</th></tr>
<tr><td>項目1-1</td><td>項目1-2</td></tr>
<tr><td>項目2-1</td><td>項目2-2</td></tr>
<tr><td>項目3-1</td><td>項目3-2</td></tr>
<tr><td>項目4-1</td><td>項目4-2</td></tr>
</table>

■Pure使ってない人のテーブル記述

<table class="stripe-table">
<tr><th>列1</th><th>列2</th></tr>
<tr><td>項目1-1</td><td>項目1-2</td></tr>
<tr><td>項目2-1</td><td>項目2-2</td></tr>
<tr><td>項目3-1</td><td>項目3-2</td></tr>
<tr><td>項目4-1</td><td>項目4-2</td></tr>
</table>

■奇数行のみ背景色を変えたい場合のストライプテーブルのCSS記述

.stripe-table tr:nth-child(odd) td, .stripe-table tr:nth-child(odd) th {
  background-color:#f9f9f9;
}

■偶数行のみ背景色を変えたい場合のストライプテーブルのCSS記述

.stripe-table tr:nth-child(even) td, .stripe-table tr:nth-child(even) th {
  background-color:#f9f9f9;
}

※使いたい方(奇数か偶数か)のCSS記述のみを、自分のCSSファイルに追記して下さい。
※背景色(上の例では「#f9f9f9」)は、ご自分で好みの色に変えて下さい。

こんな感じで、使うtableのclassに「stripe-table」を設定すればOKです。
(Pureのテーブルのデザインも併用するので、実際の記述は「<table class=”pure-table stripe-table”>」となってます。)

ただし、IE8以下はnth-childが未対応なのでご注意を。
(IE9以上とFireFoxやクローム等の他ブラウザは対応してます。)