#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)