CSS/CSSだけでテーブルを1行おきに背景色を変える方法
をテンプレートにして作成
[
トップ
] [
新規
|
一覧
|
検索
|
最終更新
|
ヘルプ
]
開始行:
#navi(../)
* CSSの設定だけでテーブルを1行おきに背景色を変える方法 [#...
ロジックを記述することなくスタイルシートの設定だけで背景...
#contents
#htmlinsertpcsp(web-top.html,web-sp.html)
* 確認用ページ [#u8d46ab2]
以下のURLで本記事の設定を確認することができます。~
http://web.just4fun.biz/css/1/
&color(red){IE8は未対応でした。};
* テーブルを1行おきに背景色を変えるスタイルシート [#zf469...
以下の記述によりテーブルを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:...
<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...
</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)
終了行:
#navi(../)
* CSSの設定だけでテーブルを1行おきに背景色を変える方法 [#...
ロジックを記述することなくスタイルシートの設定だけで背景...
#contents
#htmlinsertpcsp(web-top.html,web-sp.html)
* 確認用ページ [#u8d46ab2]
以下のURLで本記事の設定を確認することができます。~
http://web.just4fun.biz/css/1/
&color(red){IE8は未対応でした。};
* テーブルを1行おきに背景色を変えるスタイルシート [#zf469...
以下の記述によりテーブルを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:...
<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...
</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)
ページ名: