#navi(../)
* CSSの設定だけでテーブルを1行おきに背景色を変える方法 [#cd7c74c4]
ロジックを記述することなくスタイルシートの設定だけで背景色を変える方法を以下に記します。~

#contents
#htmlinsertpcsp(web-top.html,web-sp.html)


* 確認用ページ [#u8d46ab2]
以下のURLで本記事の設定を確認することができます。~

http://web.just4fun.biz/css/1/

&color(red){IE8は未対応でした。};


* テーブルを1行おきに背景色を変えるスタイルシート [#zf469295]
以下の記述によりテーブルを1行おきに背景色を変えることができます。
#ref(swcolor.css)
 table tr td {
     background: #FFFFFF;
 }
 table tr:nth-child(2n) td {
     background: #DDEEFF;
 }

上記のスタイルシートを利用したhtmlサンプルは以下のようになります。
#ref(swcolor.html)
 <?xml version="1.0" encoding="UTF-8" ?>
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">
   <head>
     <title>CSS TABLE TR TD TEST</title>
     <link rel="stylesheet" type="text/css" href="swcolor.css" />
   </head>
   <body>
     <table>
       <tr><td>1</td><td>foo</td></tr>
       <tr><td>2</td><td>bar</td></tr>
       <tr><td>3</td><td>hoge</td></tr>
   </table>
   </body>
 </html>

* スクリーンショット [#kd0a57a9]
以下のように1行ごとに背景色が違うことが確認できます。
-Firefox (Version: 12, OS: Windows 7)
#ref(swcolor-01.gif)
#br
-IE (Version: 9, OS: Windows 7)
#ref(swcolor-02.gif)
#br
-Safari (Version 5.1.5, OS: Mac OS X Lion)
#ref(swcolor-03.gif)

#htmlinsertpcsp(web-btm.html,web-sp.html)
トップ   編集 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 検索 最終更新   ヘルプ   最終更新のRSS