CSSを利用して、HTMLのテーブルで1行おきに背景色が違う縞のテーブルを作成するコードを紹介します。
概要
HTMLのテーブルで1行おきに背景色を変えるには、スタイルシートでCSSセレクタに
:nth-child(odd) :nth-child(even) や
:nth-child(2n) :nth-child(2n+1)の疑似クラスを利用すると奇数行、偶数行のスタイルを選択できます。
コード
.StripeTable {
border-collapse:collapse;
}
.StripeTable tr:nth-child(odd) {
background-color:#ffd3d3;
}
.StripeTable tr:nth-child(even) {
background-color:#c4ebff;
}
.StripeTable tr td {
border: 1px solid #C0C0C0;
}
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<link rel="stylesheet" type="text/css" href="StripeStyle.css" />
</head>
<body>
<table class="StripeTable">
<tr>
<td>ペンギンスフレ</td>
<td>\400</td>
<td>あと4個</td>
</tr>
<tr>
<td>しろくまスフレ</td>
<td>\120</td>
<td>あと8個</td>
</tr>
<tr>
<td>くまさんスフレ</td>
<td>\100</td>
<td>あと12個</td>
</tr>
<tr>
<td>キャラメルスフレ</td>
<td>\180</td>
<td>あと10個</td>
</tr>
<tr>
<td>イチゴのスフレ</td>
<td>\250</td>
<td>あと5個</td>
</tr>
</table>
</body>
</html>
解説
CSSセレクタの後ろに
:nth-child(odd) を付加することで奇数番目の要素のスタイルを設定できます。また、CSSセレクタの後ろに
:nth-child(even) を付加すると偶数番目の要素のスタイルを設定できます。上記の例ではtrに
:nth-child(odd) :nth-child(even)を指定し背景色を変更しているため、行ごとに交互に背景色が変わる縞のテーブルが表示されます。
:nth-child(odd) :nth-child(even)を用いる以外に、
:nth-child(2n) :nth-child(2n+1)を用いた書式で記述することもできます。
参考:別の書式
.StripeTable {
border-collapse:collapse;
}
.StripeTable tr:nth-child(2n+1) {
background-color:#ffd3d3;
}
.StripeTable tr:nth-child(2n) {
background-color:#c4ebff;
}
.StripeTable tr td {
border: 1px solid #C0C0C0;
}
実行結果
上記のHTMLファイルをWebブラウザで表示します。行ごとに背景色の異なる縞のテーブルが表示されます。
著者
iPentecのメインプログラマー
C#, ASP.NET の開発がメイン、少し前まではDelphiを愛用
最終更新日: 2021-01-30
作成日: 2012-10-18
