CSSの設定だけでテーブルを1行おきに背景色を変える方法†

ロジックを記述することなくスタイルシートの設定だけで背景色を変える方法を以下に記します。

スポンサーリンク
↑

確認用ページ†

以下のURLで本記事の設定を確認することができます。

http://web.just4fun.biz/css/1/

IE8は未対応でした。

↑

テーブルを1行おきに背景色を変えるスタイルシート†

以下の記述によりテーブルを1行おきに背景色を変えることができます。

fileswcolor.css
table tr td {
    background: #FFFFFF;
}
table tr:nth-child(2n) td {
    background: #DDEEFF;
}

上記のスタイルシートを利用したhtmlサンプルは以下のようになります。

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

添付ファイル: fileswcolor-03.gif 1010件 [詳細] fileswcolor.html 1271件 [詳細] fileswcolor-01.gif 1032件 [詳細] fileswcolor-02.gif 943件 [詳細] fileswcolor.css 1053件 [詳細]
トップ   編集 凍結 差分 履歴 添付 複製 名前変更 リロード   新規 一覧 検索 最終更新   ヘルプ   最終更新のRSS
Last-modified: 2025-03-12 (水) 12:11:54