CSSの設定だけでテーブルを1行おきに背景色を変える方法 †ロジックを記述することなくスタイルシートの設定だけで背景色を変える方法を以下に記します。 スポンサーリンク 確認用ページ †以下のURLで本記事の設定を確認することができます。 http://web.just4fun.biz/css/1/ IE8は未対応でした。 テーブルを1行おきに背景色を変えるスタイルシート †以下の記述によりテーブルを1行おきに背景色を変えることができます。 table tr td { background: #FFFFFF; } table tr:nth-child(2n) td { background: #DDEEFF; } 上記のスタイルシートを利用した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> スクリーンショット †以下のように1行ごとに背景色が違うことが確認できます。
スポンサーリンク |