ゼブラ縞模様テーブル
奇数行と偶数行で背景色を交互に変える、いわゆるゼブラ縞のテーブルです。仕組みは tbody tr:nth-child(even) で偶数行だけに薄い背景を当てるだけで、行を増やしても自動で縞が続きます。さらに tr:hover で行全体にホバー色を載せ、今どの行を見ているかを目で追いやすくしています。
解説
奇数行と偶数行で背景色を交互に変える、いわゆるゼブラ縞のテーブルです。仕組みは tbody tr:nth-child(even) で偶数行だけに薄い背景を当てるだけで、行を増やしても自動で縞が続きます。さらに tr:hover で行全体にホバー色を載せ、今どの行を見ているかを目で追いやすくしています。見出し行は濃い背景に白文字でコントラストを付け、本体と明確に区別しています。
可読性が上がる場面
- 商品一覧や価格表など、横に項目が並ぶデータ
- 会員名簿や注文履歴のような行数の多い表
- 仕様比較やスペック一覧の読み合わせ
縞の濃さは nth-child(even) の背景色を本文に近い薄いグレーへ寄せると上品にまとまります。border-collapse:collapse で罫線の二重化を防ぎ、padding でセルの余白を確保しているのが読みやすさの要です。注意点として、行数が多い表はスマホでは横にあふれやすいため、ラッパーで横スクロールを許可するか、重要な列を絞る設計を添えると崩れません。
よくある質問
縞の色を自分のサイトに合わせたいです。
偶数行に当たっている nth-child(even) の背景色を変えれば縞の色が、ホバー色を変えれば行をなぞったときの色が変わります。薄いグレー系にすると本文と馴染みます。
行を増やしても縞模様は続きますか。
続きます。nth-child(even) は偶数番目の行を自動で対象にするため、行を何行追加しても交互の縞が崩れず維持されます。