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

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

サンプル

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

ソース

</p>
<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>
<p>

table.weather {<br />
	border-collapse: sepalete;<br />
	border-spacing: 0;<br />
}<br />
table.weather th,<br />
table.weather td {<br />
	text-align: center;<br />
	border: 1px solid;<br />
	border-color: #eee #999 #666 #ccc;<br />
	vertical-align: middle;<br />
}<br />
table.weather th {<br />
	font-weight: bold;<br />
	background: #ccc;<br />
	padding: 0.5em;<br />
}<br />
table.weather td {<br />
	padding: 0.25em;<br />
}<br />
table.weather thead td {<br />
	background: #bbb;<br />
	border: 0 none;<br />
}</p>
<p>table.weather:hover tbody td {<br />
	color: #ccc;<br />
	background: #ccc;<br />
}<br />
table.weather:hover tbody tr:hover td {<br />
	color: #666;<br />
	background: #cef;<br />
}<br />
table.weather:hover tbody tr:hover th {<br />
	background: #eee;<br />
}<br />
table.weather:hover tbody:hover td:hover {<br />
	opacity: 1;<br />
	color: #fff;<br />
	background: #69f;<br />
}

関連記事