このエントリーをはてなブックマークに追加


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行ごとに背景色が違うことが確認できます。

  • Firefox (Version: 12, OS: Windows 7)
    swcolor-01.gif
     
  • IE (Version: 9, OS: Windows 7)
    swcolor-02.gif
     
  • Safari (Version 5.1.5, OS: Mac OS X Lion)
    swcolor-03.gif

スポンサーリンク

添付ファイル: fileswcolor-03.gif 227件 [詳細] fileswcolor-01.gif 265件 [詳細] fileswcolor.css 322件 [詳細] fileswcolor.html 536件 [詳細] fileswcolor-02.gif 192件 [詳細]

トップ   編集 凍結 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS
Last-modified: 2015-03-20 (金) 22:35:48 (1335d)