CSS/CSSだけでテーブルを1行おきに背景色を変える方法
の編集
Top
/
CSS
/
CSSだけでテーブルを1行おきに背景色を変える方法
[
トップ
] [
編集
|
差分
|
バックアップ
|
添付
|
リロード
] [
新規
|
一覧
|
検索
|
最終更新
|
ヘルプ
]
-- 雛形とするページ --
(no template pages)
#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)
タイムスタンプを変更しない
#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)
テキスト整形のルールを表示する
添付ファイル:
swcolor-03.gif
597件
[
詳細
]
swcolor.html
884件
[
詳細
]
swcolor-01.gif
620件
[
詳細
]
swcolor-02.gif
532件
[
詳細
]
swcolor.css
673件
[
詳細
]