CSSのhoverだけでどこまでテーブルを読みやすくできるか

CSSのhoverでテーブルの情報を読みやすくしてみたサンプルです。
縦軸が取ってこれないところが残念なんですけどね。
お天気アイコンを用意できてないところもご愛嬌で…。

サンプル

10(月) 11(火) 12(水) 13(木) 14(金) 15(土) 16(日)
北海道 曇/雪 晴/雪 曇/雪 晴/雪 曇/雪 雪/曇 曇/雪
東北 曇/晴 晴/雪 曇/晴 晴/曇 曇/雪 曇/晴
関東・甲信 曇/雪 曇/晴 晴/曇 曇/晴 曇/晴 曇/晴 晴/曇
中部・北陸 曇/雪 曇/雪 曇/雪 曇/雪 曇/雪 曇/雪
近畿 曇/雪 曇/晴 曇/晴 曇/晴 曇/晴 晴/曇
中国・四国 雪/曇 曇/晴 晴/曇 曇/晴 晴/曇 晴/曇
九州 雨/曇 晴/曇 晴/曇 曇/晴 晴/曇 曇/晴 晴/曇
沖縄 曇/雨 曇/雨 曇/晴 晴/曇 晴/曇

ソース

<table class="weather">
	<thead>
		<tr>
			<td></td>
			<th>10(月)</th>
			<th>11(火)</th>
			<th>12(水)</th>
			<th>13(木)</th>
			<th>14(金)</th>
			<th>15(土)</th>
			<th>16(日)</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<th>北海道</th>
			<td>曇/雪</td>
			<td>晴/雪</td>
			<td>曇/雪</td>
			<td>晴/雪</td>
			<td>曇/雪</td>
			<td>雪/曇</td>
			<td>曇/雪</td>
		</tr>
		<tr>
			<th>東北</th>
			<td>曇/晴</td>
			<td>晴/雪</td>
			<td>曇/晴</td>
			<td>晴/曇</td>
			<td>曇</td>
			<td>曇/雪</td>
			<td>曇/晴</td>
		</tr>
		<tr>
			<th>関東・甲信</th>
			<td>曇/雪</td>
			<td>曇/晴</td>
			<td>晴/曇</td>
			<td>曇/晴</td>
			<td>曇/晴</td>
			<td>曇/晴</td>
			<td>晴/曇</td>
		</tr>
		<tr>
			<th>中部・北陸</th>
			<td>曇/雪</td>
			<td>曇/雪</td>
			<td>曇/雪</td>
			<td>曇/雪</td>
			<td>曇/雪</td>
			<td>曇/雪</td>
			<td>曇</td>
		</tr>
		<tr>
			<th>近畿</th>
			<td>曇/雪</td>
			<td>曇/晴</td>
			<td>曇/晴</td>
			<td>曇/晴</td>
			<td>曇/晴</td>
			<td>曇</td>
			<td>晴/曇</td>
		</tr>
		<tr>
			<th>中国・四国</th>
			<td>雪/曇</td>
			<td>曇/晴</td>
			<td>晴/曇</td>
			<td>曇/晴</td>
			<td>晴/曇</td>
			<td>曇</td>
			<td>晴/曇</td>
		</tr>
		<tr>
			<th>九州</th>
			<td>雨/曇</td>
			<td>晴/曇</td>
			<td>晴/曇</td>
			<td>曇/晴</td>
			<td>晴/曇</td>
			<td>曇/晴</td>
			<td>晴/曇</td>
		</tr>
		<tr>
			<th>沖縄</th>
			<td>曇/雨</td>
			<td>曇</td>
			<td>曇</td>
			<td>曇/雨</td>
			<td>曇/晴</td>
			<td>晴/曇</td>
			<td>晴/曇</td>
		</tr>
	</tbody>
</table>
table.weather {
	border-collapse: sepalete;
	border-spacing: 0;
}
table.weather th,
table.weather td {
	text-align: center;
	border: 1px solid;
	border-color: #eee #999 #666 #ccc;
	vertical-align: middle;
}
table.weather th {
	font-weight: bold;
	background: #ccc;
	padding: 0.5em;
}
table.weather td {
	padding: 0.25em;
}
table.weather thead td {
	background: #bbb;
	border: 0 none;
}

table.weather:hover tbody td {
	color: #ccc;
	background: #ccc;
}
table.weather:hover tbody tr:hover td {
	color: #666;
	background: #cef;
}
table.weather:hover tbody tr:hover th {
	background: #eee;
}
table.weather:hover tbody:hover td:hover {
	opacity: 1;
	color: #fff;
	background: #69f;
}

関連記事

Pocket