YahooのCSSフレームワーク「Pure」のストライプテーブルは、実現のさせ方がちょっと面倒(全部の奇数行のtrに「class=”pure-table-odd”」をつける)だったので、tableにclassを設定すればOKな記述を、Pureと併用する自作の方のCSSに追加することにしました。
■Pure使ってる人のテーブル記述
1 | < table class = "pure-table stripe-table" > |
2 | < tr >< th >列1</ th >< th >列2</ th ></ tr > |
3 | < tr >< td >項目1-1</ td >< td >項目1-2</ td ></ tr > |
4 | < tr >< td >項目2-1</ td >< td >項目2-2</ td ></ tr > |
5 | < tr >< td >項目3-1</ td >< td >項目3-2</ td ></ tr > |
6 | < tr >< td >項目4-1</ td >< td >項目4-2</ td ></ tr > |
■Pure使ってない人のテーブル記述
1 | < table class = "stripe-table" > |
2 | < tr >< th >列1</ th >< th >列2</ th ></ tr > |
3 | < tr >< td >項目1-1</ td >< td >項目1-2</ td ></ tr > |
4 | < tr >< td >項目2-1</ td >< td >項目2-2</ td ></ tr > |
5 | < tr >< td >項目3-1</ td >< td >項目3-2</ td ></ tr > |
6 | < tr >< td >項目4-1</ td >< td >項目4-2</ td ></ tr > |
■奇数行のみ背景色を変えたい場合のストライプテーブルのCSS記述
1 | .stripe-table tr:nth-child(odd) td, .stripe-table tr:nth-child(odd) th { |
2 | background-color : #f9f9f9 ; |
■偶数行のみ背景色を変えたい場合のストライプテーブルのCSS記述
1 | .stripe-table tr:nth-child(even) td, .stripe-table tr:nth-child(even) th { |
2 | background-color : #f9f9f9 ; |
※使いたい方(奇数か偶数か)のCSS記述のみを、自分のCSSファイルに追記して下さい。
※背景色(上の例では「#f9f9f9」)は、ご自分で好みの色に変えて下さい。
こんな感じで、使うtableのclassに「stripe-table」を設定すればOKです。
(Pureのテーブルのデザインも併用するので、実際の記述は「<table class=”pure-table stripe-table”>」となってます。)
ただし、IE8以下はnth-childが未対応なのでご注意を。
(IE9以上とFireFoxやクローム等の他ブラウザは対応してます。)