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やクローム等の他ブラウザは対応してます。)