[CSS]さりげなく、美しくて分かりやすいテーブルにするCSS3のチュートリアル

IE6などの非サポートブラウザも配慮した、角丸、ゼブラ柄、ハイライトなど美しくて分かりやすいテーブルを実装するCSS3のチュートリアルを紹介します。

デモのキャプチャ

Practical CSS3 tables with rounded corners
デモページ

デモ

デモでは、セルがホバーでハイライトするテーブル、セルを交互にカラーリングしたテーブルの2種類があります。

デモのキャプチャ

デモページ:Highlighted rows, borders
角丸、セルがホバーでハイライト

デモのキャプチャ

デモページ:Zebra stripes, footer
角丸、セルを交互にカラーリング

実装のポイント

CSS3を使って美しく、そして機能するテーブルを実装するポイントです。

  • 画像を使用しないで、角丸を実装。
  • 余分なid, classは使用せず、更新が容易。
    ※tableにclassを一つだけ
  • ユーザフレンドリーで、読むことが簡単。

実装

HTML

HTMLは非常にシンプルです。
classは、tableタグにのみ使用します。

<table class="bordered">
	<thead>
	<tr>
		<th>#</th>
		<th>IMDB Top 10 Movies</th>
		<th>Year</th>
	</tr>
	</thead>
	<tr>
		<td>1</td>
		<td>The Shawshank Redemption</td>
		<td>1994</td>
	</tr>
	<tr>
</table>

※デモの一つ目と二つ目は、tableタグのclass名が異なるだけです。

テーブルの四隅を角丸に

角丸のスタイルシートの前に、隣接するセルのボーダーをborder-collapseで設定します。

table {
	*border-collapse: collapse; /* IE7 and lower */
	border-spacing: 0;
}

※「*」を使用してIE7以下用に設定します。

border-collapseを0に設定したら、角丸を設定します。

th:first-child {
	-moz-border-radius: 6px 0 0 0;
	-webkit-border-radius: 6px 0 0 0;
	border-radius: 6px 0 0 0;
}

th:last-child {
	-moz-border-radius: 0 6px 0 0;
	-webkit-border-radius: 0 6px 0 0;
	border-radius: 0 6px 0 0;
}

テーブルのセルをホバーでハイライト

テーブルのセルをホバー時にアニメーションでハイライト表示します。

.bordered tr:hover
{
	background: #fbf8e9;
	-o-transition: all 0.1s ease-in-out;
	-webkit-transition: all 0.1s ease-in-out;
	-moz-transition: all 0.1s ease-in-out;
	-ms-transition: all 0.1s ease-in-out;
	transition: all 0.1s ease-in-out;
}

CSS3非対応ブラウザや「:hover」にバグのあるIE6用には、jQueryを使用します。

$('.bordered tr').mouseover(function(){
    $(this).addClass('highlight');
}).mouseout(function(){
    $(this).removeClass('highlight');
});

ホバー時に「highlight」というclassを付与します。
「.highlight」は下記のように設定します。

.highlight
{
  background: #fbf8e9;
  -o-transition: all 0.1s ease-in-out;
  -webkit-transition: all 0.1s ease-in-out;
  -moz-transition: all 0.1s ease-in-out;
  -ms-transition: all 0.1s ease-in-out;
  transition: all 0.1s ease-in-out;
}

※CSS3非対応ブラウザは背景色が変わるだけで、アニメーションは適用されません。

テーブルのセルを交互にカラーリング

テーブルのセルを半透明のゼブラ柄にします。

.zebra tbody tr:nth-child(even) {
    background: #f5f5f5;
    -webkit-box-shadow: 0 1px 0 rgba(255,255,255,.8) inset;
    -moz-box-shadow:0 1px 0 rgba(255,255,255,.8) inset;
    box-shadow: 0 1px 0 rgba(255,255,255,.8) inset;
}

:nth-child(n)非対応ブラウザにはjQueryで実装します。

$(".zebra tr:even").addClass('alternate');

セルに交互に「alternate」というclassを付与します。
「.alternate」は下記のように設定します。

.alternate {
    background: #f5f5f5;
    -webkit-box-shadow: 0 1px 0 rgba(255,255,255,.8) inset;
    -moz-box-shadow:0 1px 0 rgba(255,255,255,.8) inset;
    box-shadow: 0 1px 0 rgba(255,255,255,.8) inset;
}

※CSS3非対応ブラウザは背景色が変わるだけで、ボックスシャドウは適用されません。

ブラウザのサポート

このチュートリアルでは、CSS3でのソリューションとjQueryのソリューション、両方紹介しました。
どちらを使うかは、あなたがターゲットとするユーザーによって決めてください。

top of page

©2017 coliss