新しいtableのスタイル

なんとなく表(table)のCSSを変えてみた。

ポイントはセルの角、つまり縦線と横線が交差する点の色をどう制御するか。

表はHTML要素的には table > tbody > tr > td の順に重なっているわけだけど、基本的に手前である子孫要素(tdに近い側)が優先される。なので、セル(td)の区切り線の色を指定すると、それは表全体(table)の境界線よりも優先されてしまう。その結果表全体の境界線にセルの区切り線が食い込む形になってしまう。

そこで重要なのが境界線の指定が重なったときに何が優先されるかというルール。親要素であっても線の幅が太い方が優先される。同じ太さならスタイル(破線とか二重線とか)によって優先度が決められている。特に二重線(border-style: double)は使える。solidよりもdoubleのほうが優先されるからだ。その上二重線といっても1pxの太さならsolidと見た目は変わらない。

外側(親、祖先)の要素の太さやスタイルをより優先度が高い物に変えることによって、セル区切りの色が外にはみ出さないように出来る。

/* table style */
table{ border: 1px double #4472c4;}
  /* striped background color */
thead{ border: none; background-color: #4472c4; color: #ffffff;}
tbody>tr:nth-child(odd){background-color: #d9e1f2;}
  /* vertical line between colgroups */
colgroup{ border: none;}
colgroup+colgroup{ border: none; border-left: 2px double #81a0d7;}
  /* horizontal line between tbodys */
tbody{border: none;}
tbody+tbody { border-top: 2px double #81a0d7;}
  /* vertical line between columns  */
tr:nth-child(even) >td+td {border-left: 1px solid #d9e1f2;}
tr:nth-child(odd)>td+td, th+th {border-left: 1px solid #fff;}

テスト

0	1	2	3	4
a	b	c	d	e
f	g	h	i	j
k	l	m	n	o

ヘッダー無し

項目1	項目2
項目3	項目4

ヘッダー無し

項目1

項目2

ヘッダー無し

項目1	項目2
項目3	項目4
項目3	項目4

良くある奴

品名	価格
りんご	100
みかん	80
みかん	80
	180

列グループ

場所	朝	昼	夜	最低	最高
東京	晴れ	晴れ	曇り	-1	9
大阪	雨	晴れ	晴れ	0	12
大阪	雨	晴れ	晴れ	0	12
大阪	雨	晴れ	晴れ	0	12
大阪	雨	晴れ	晴れ	0	12
大阪	雨	晴れ	晴れ	0	12
大阪	雨	晴れ	晴れ	0	12