テーブルを使った表で、少しでも見やすくするためにセルにハイライトを入れたりしたくなる時があります
そんな時はCSSだけでカンタンに縦横のセル全部をハイライトしちゃいましょ～
jQueryとかは不要なので、ファイルも増えないし便利ですよ！

デモページ

HTML

特別な要素もないので単純なテーブルでOK

<table>
	<tr>
		<th>&nbsp;</th>
		<th>A</th>
		<th>B</th>
		<th>C</th>
		<th>D</th>
		<th>E</th>
	</tr>
	<tr>
		<th>a</th>
		<td>セル1</td>
		<td>セル2</td>
		<td>セル3</td>
		<td>セル4</td>
		<td>セル5</td>
	</tr>
	<tr>
		<th>b</th>
		<td>セル6</td>
		<td>セル7</td>
		<td>セル8</td>
		<td>セル9</td>
		<td>セル10</td>
	</tr>
	<tr>
		<th>c</th>
		<td>セル11</td>
		<td>セル12</td>
		<td>セル13</td>
		<td>セル14</td>
		<td>セル15</td>
	</tr>
	<tr>
		<th>d</th>
		<td>セル16</td>
		<td>セル17</td>
		<td>セル18</td>
		<td>セル19</td>
		<td>セル20</td>
	</tr>
	<tr>
		<th>e</th>
		<td>セル21</td>
		<td>セル22</td>
		<td>セル23</td>
		<td>セル24</td>
		<td>セル25</td>
	</tr>
</table>

CSS

そのままコピペしてハイライトのカラー部分のみ変更OK！

table{
	margin:0 auto;
	border-spacing: 0;
	border-collapse: collapse;
	border: solid 1px rgba( 0,0,0,.6 );
	overflow: hidden;	/*これがないとはみ出しちゃうので必須*/
}
table th,
table td{
	padding: 1em 1.5em;
	border: dotted 1px rgba( 0,0,0,.6 );
	text-align:center;
	position: relative;	/*カラーを疑似要素で乗せるので必須*/
}
table th{ color:#fff; background:rgba( 0,174,201,1 ); }
table td:hover{
	background: rgba( 255,255,96,.6 );		/*ホバーしたセルのカラー*/
}
table td:hover::before,
table td:hover::after{	/*ホバーした縦横セルのハイライト準備*/
	content: "";
	width: 100%;
	height: 100%;
	background: rgba( 255,255,96,.2 );		/*縦横のカラー指定*/
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
}
table td:hover::before{	/*ホバーした横のセル全部をハイライト*/
	width: 200vw;
	left: -100vw;
}
table td:hover::after{	/*ホバーした縦のセル全部をハイライト*/
	height: 200vh;
	top: -100vh;
}

デモページ

どうです？カンタンにできちゃいますよね！
シンプルすぎて応用もなにもないですけど興味ある方は試してみてください＾＾