CSS3セレクタで1行ごとにテーブルに背景色をつける

テーブルにCSS3セレクタの「E:nth-child(n)」を使って1行ごとに背景色を付けてみます。これだけでかなり見た目の印象も変わると思います。classを使わないのでhtmlを変更する必要もなく、簡単にすべてのテーブルに適用できます。

IE6~8でもCSS3セレクタが利用できるツールの決定版「Selectivizr」 で紹介したようにCSS3セレクタはIE対策も容易なのでぜひお試しください。

サンプル1

ブラウザ 開 発
Firefox Mozilla
Chrome Google
Internet Explorer microsoft
Safari apple
Opera Opera Software

htmlは非常にシンプルな普通のテーブルです。

html
<table>
  <tr>
    <th>ブラウザ</th>
    <th>開 発</th>
  </tr>
  <tr>
    <td>Firefox</td>
    <td>Mozilla</td>
  </tr>
  <tr>
    <td>Chrome</td>
    <td>Google</td>
  </tr>
  <tr>
    <td>Internet Explorer</td>
    <td>microsoft</td>
  </tr>
  <tr>
    <td>Safari</td>
    <td>apple</td>
  </tr>
  <tr>
    <td>Opera</td>
    <td>Opera Software</td>
  </tr>
</table>

次にCSSです。

CSS
table {
    width: auto;
    border: 1px solid #B0C4DE;
    border-collapse: collapse;
    border-spacing: 0;
}
th {
    color: #fff;
    padding: 5px;
    border-bottom: 1px solid #B0C4DE;
	border-left: 1px solid #B0C4DE;
    background: #4682B4;
    font-weight: bold;
    line-height: 120%;
    text-align: center;
}
td {
    padding: 5px;
    border-bottom: 1px solid #B0C4DE;
	border-left: 1px solid #B0C4DE;
}
tr:nth-child(2n+1) {
    background: #F0FFFF;
}

ポイントは最後の「tr:nth-child(2n+1) 」です。以下のように規則に則ってスタイルが適用されます。

tr:nth-child(n) ・・・ n番目のtrに適用
tr:nth-child(odd) ・・・ 奇数番目のtrに適用
tr:nth-child(2n+1) ・・・ 奇数番目のtrに適用
tr:nth-child(even) ・・・ 偶数番目のtrに適用
tr:nth-child(2n) ・・・ 偶数番目のtrに適用
tr:nth-child(3n) ・・・ 3,6,9,12…番目のtrに適用
tr:nth-child(3n+1) ・・・ 1,4,7,10…番目のtrに適用

ということで今回の場合偶数行のみ背景色をつけています。

サンプル2

「:nth-child(n)」を使用例をもう1つ。縦に長いテーブルで5行ごとに線を太くして見やすくしてみます。

1 5行ごとに線が太くなっています
2  
3  
4  
5  
6  
7  
8  
9  
10  
11  
12  
13  

htmlは先ほど同様、基本的なテーブルです。7行目以降省略しています。

html
<table>
  <tr>
    <th>1</th>
    <td>5行ごとに線が太くなっています</td>
  </tr>
  <tr>
    <th>2</th>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <th>3</th>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <th>4</th>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <th>5</th>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <th>6</th>
    <td>&nbsp;</td>
  </tr>
</table>

次にCSSです。

CSS
table {
    width: auto;
    border: 1px solid #B0C4DE;
    border-collapse: collapse;
    border-spacing: 0;
}
th {
    color: #fff;
    padding: 5px;
    border-bottom: 1px solid #B0C4DE;
	border-left: 1px solid #B0C4DE;
    background: #4682B4;
    font-weight: bold;
    line-height: 120%;
    text-align: center;
}
td {
    padding: 5px;
    border-bottom: 1px solid #B0C4DE;
	border-left: 1px solid #B0C4DE;
}
tr:nth-child(2n+1) {
    background: #F0FFFF;
}
tr:nth-child(5n) {
    border-bottom: 2px solid #B0C4DE;
}

偶数行で背景色を指定し、5行ごとに線を太くしています。

ちょっとしたことですが、あるのとないのではかなり印象は違いますね。

フィードやTwitterで最新情報をチェック
follow us in feedly
この記事に付いているタグの最新記事一覧
loading...
コメント
いつも勉強させてもらっています。

良ければ、私のサイトの登録手順ページの伝わりやすい画像+説明方法を

教えてもらえませんか?
【2011/06/20 15:01】 | 西村 #- | [edit]
はじめまして

イラストもたくさん使われていてとても安心感のあるサイトですね。
そんなすばらしいサイトに私ごときがアドバイスなんて恐れ多いです。
ただ、せっかくですのでユーザー目線ということでお答えさせていただきます。

登録手順のページというのはこちらですよね。
http://samurai-shi.com/tejyun.php

役所への書類提出で困っている人と行政書士とのマッチングサイトですので
両者の立場での説明かを分かるようにすればいいのかなと思います。

あと、具体的にどういうときに行政書士が使えるのか分かりやすく説明
してあげればいいのかなと。
「飲食店を開きたいけどどのような申請が必要か分からない方へ」とか。
趣旨と違ったらごめんなさい。
【2011/06/21 08:02】 | 管理人 #E2ywrYdA | [edit]









※コメントはご意見ご感想や間違いのご指摘等にしていただけますようお願いいたします。コメントを確認する時間がなく、技術的なご質問をいただいても答えできません。申し訳ございませんがご理解のほどお願いいたします。

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