tableを見やすくするCSS

更新日 : 2021.04.04

tableを見やすくするCSS
Share
3
0
8
tableタグで表を実装した際にデータ量が多いと見づらくなりがちです。それを解消するためにCSSを使ってカーソルをのせるとその行をハイライト表示させる方法をご紹介します。比較させたい表の際に使えるTipsです。

デモを用意したので、PCで閲覧し、カーソルをのせてみてください。

プラン名価格容量
Aプラン1,000円100GB
Bプラン1,200円120GB
Cプラン1,500円150GB
Dプラン1,700円170GB
Eプラン2,000円200GB
Fプラン2,200円220GB
Gプラン2,500円250GB
Hプラン2,800円280GB
Iプラン3,000円300GB
Jプラン3,200円320GB
<table;>
	<thead>
		<tr>
			<th>プラン名</th>
			<th>価格</th>
			<th>容量</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>Aプラン</td>
			<td>1,000円</td>
			<td>100GB</td>
		</tr>
		<tr>
			<td>Bプラン</td>
			<td>1,200円</td>
			<td>120GB</td>
		</tr>
	</tbody>
</table>
tbody:hover td {
	color: #77735a;
	background-color: #f4f3ef;
}

tbody:hover tr:hover td {
	color: #111;
	background-color: #fff;
}

table {
	margin-right: auto;
	margin-left: auto;
	width: 500px;
	font-size: 14px;
	text-align: center;
}

table th,
table td {
	padding: 10px;
	transition: 0.2s;
}

1行目のtbody:hover tdでは、tbody領域にカーソルをのせた時のtdスタイルを指定します。ここでは、テキストと背景色のコントラスト比を低く設定しておきます。

6行目のtbody:hover tr:hover tdでは、カーソルをのせている行のスタイルを指定。見やすくするためテキストと背景色のコントラスト比を高く設定します。

これでカーソルをのせている行とのせていない行の差を作り、ハイライト表示にしています。

人気記事

  1. 【保存版】CSSのみのボタンデザイン!私が現場で使ってきたボタンアイデア30選の画像

    【保存版】CSSのみのボタンデザイン – 私が現場で使ってきたボタンアイデア30選

  2. 現場で使えるFlexboxレイアウト12選。実際に使ってきたレイアウトを紹介しますの画像

    現場で使えるFlexboxレイアウト12選。実際に使ってきたレイアウトを紹介します

  3. Web制作の現場で使えるWebサービス15選!無料で使えるサービスを集めてみた

    Web制作の現場で使えるWebサービス15選!無料で使えるサービスを集めてみた

  4. CSS見出しデザイン21スタイル - シンプルな見出しデザインをご紹介の画像

    CSS見出しデザイン21選。現場ですぐ使える見出しデザインをご紹介

  5. ボタンやテキストリンク、hoverスタイルをCSSのみで19パターン実装するの画像

    CSSのみで実装するボタン、テキストリンク、hoverスタイル19選