tableのスクロール その2

例えば、ボウリングの表の生データがあるとする。

CASE 0

Name	1		2		3		4		5		6		7		8		9		10			Total
佐藤
武藤
尾藤
加藤

簡単に説明すると、Nameの行はtheadタグ内、各人の部分はtbody内にある。
また、colgroupで、id="name"、id="frame1-9" span="18"、id="frame10" span="3"、id="score"とした。

例えば、
theadの背景色を薄緑、
tr:nth-child(3)の背景色を薄赤、
colgroup:nth-child(3)の背景色を薄青、
にしてみる。

CASE 1

Name	1		2		3		4		5		6		7		8		9		10			Total
佐藤
武藤
尾藤
加藤

<style type="text/css">
table.case1 thead { background-color: #ddffdd; }
table.case1 tr:nth-child(3) { background-color: #ffdddd; }
table.case1 colgroup:nth-child(3) { background-color: #ddddff !important; }
</style>

colgroupを最後に書いて、さらに!importantも付けてみたが、colgroupの設定が弱いことがわかる。

tableタグ内の親子関係で言えば、colgroupは、thead、tbody、tfootと物理的には兄弟要素であるが、colgroupは論理的には親要素なのではないだろうかと考えてしまう。

なんとなくだが、colgroupの実体が見えてきた。

では、セルの幅を設定してみる。

#1-9とcolgroup#10の幅を10px、
#nameと#scoreの幅を40px、
にしてみます。

CASE 2

Name	1		2		3		4		5		6		7		8		9		10			Total
佐藤
武藤
尾藤
加藤

<style type="text/css">
table.case2 #frame1-9, #frame10 { width: 10px; }
table.case2 #name, #score { width: 40px; }
</style>

広がりましたね。

では、この設定を残したまま、tbodyを縦スクロール出来るようにしようと、theadやtbodyにblock設定などを施してみる。


CASE 3

Name	1		2		3		4		5		6		7		8		9		10			Total
佐藤
武藤
尾藤
加藤

<style type="text/css">
table.case3 #frame1-9, #frame10 { width: 10px; }
table.case3 #name, #score { width: 40px; }
table.case3 thead { display: block; }
table.case3 tbody { display: block; height: 100px; overflow-x: hidden; overflow-y: scroll; }
</style>

はい、ぶち壊れましたｗ。

先の記事で書いた通り、thead、tbodyのdisplayをblockかinline-blockにしないことには、スクロールはうまくいかない。

CASE 0からcolgroupを排除して、CSSのみで装飾を施してみる。


CASE 4

Name	1		2		3		4		5		6		7		8		9		10			Total
佐藤		X		X	1	-		X	1	-		X	1	-		X	1	-	X	X	X	99
	21		32		33		44		45		56		57		68		69		99
武藤		X	1	-		X		X	1	-		X	1	-		X	1	-	X	X	X	99
	11		12		33		44		45		56		57		68		69		99
尾藤		X	1	-		X	1	-		X		X	1	-		X	1	-	X	X	X	99
	11		12		23		24		45		56		57		68		69		99
加藤		X	1	-		X	1	-		X	1	-		X		X	1	-	X	X	X	99
	11		12		23		24		35		36		57		68		69		99

やっぱり、ここまで複雑なものになると、各セル毎にclassやidなどで上手くわけて、ガチガチに設定し、CSSでゴリゴリ書くしかないのかな。