tbodyにCSSでheightで高さ、overflorでscrollを設定しても動かないという記事をよく見かける。
その原因は、おそらくcssのdisplay設定である。
例えば、displayの設定として、divはblock、spanはinline、とデフォルトがあり、overflowでscrollさせるには、displayがblockかinline-blockである必要があると考える。
tableタグ内での各タグのdisplayのデフォルト設定は、tableやtable-cellといったもので、blockではないのだろう。
やりたいことは、表組で、theadでタイトル、tbodyでデータ、として、縦に長いデータをスクロールバーを付けてコンパクトに表示したい。
ここで考えなければいけないのが、データが大量にあるということ。
何が言いたいかと言えば、tdタグの全てにclass=とか、データが多いのでやりたくない。
colgroupタグやcolタグで、一括で列の設定をできればよいのだが、果たしてうまくいくのだろうか。
tableをdivで括ってdivに縦スクロールを付けてみる。
CASE 1
<div style="display: inline-block; height: 100px; overflow-x: hidden; overflow-y: scroll;">
<table>・・・</table>
</table>
</div>
まぁ、コレでもHTMLやCSS初心者にしては上出来なのかもしれない。
キモは、displayをblockではなくinline-blockにしているところである。
divのdisplay設定をしないと、デフォルトのblockになり、divが横幅いっぱいまで広がり、スクロールバーが右端までいってしまうことでしょう。
ここからの発想として、各列の幅を決め打ちして、タイトル行をdivの外に作れば良いのでは？と考えに及ぶでしょう。
CASE 2
| No | 氏名 | 読み仮名 |
Noと1のtdタグにwidth="30"
氏名と奥田美香のtdタグにwidth="150"
読み仮名とおくだみかのtdタグにwidth="190"
をそれぞれ設定
タイトル用のtableをclass="case2h"
データ用のtableをclass="case2d"
とクラス名を指定し、
<style type="text/css">
table.case2h tr:last-child td { border-bottom: none; }
table.case2d tr:first-child td { border-top: none; }
</style>
とスタイル設定して、それぞれのtableの結合部分を綺麗に装飾してみました。
さて、こんな面倒なことをしなくとも、tableタグだけで簡潔に完結出来ないものかと考えるのは普通ですね。
CASE 3
| No | 氏名 | 読み仮名 |
| 1 | 奥田美香 | おくだ みか |
| 2 | 榎田道子 | えのきだ みちこ |
| 3 | 吉野佳代子 | よしの かよこ |
| 4 | 新田恵利 | にった えり |
| 5 | 中島美春 | なかじま みはる |
| 6 | 樹原亜紀 | きはら あき |
| 7 | 友田麻美子 | ともだ まみこ |
| 8 | 国生さゆり | こくしょう さゆり |
| 9 | 名越美香 | なごや みか |
| 10 | 佐藤真由美 | さとう まゆみ |
| 11 | 福永恵規 | ふくなが さとみ |
| 12 | 河合その子 | かわい そのこ |
| 13 | 内海和子 | うつみ かずこ |
| 14 | 富川春美 | とみかわ はるみ |
| 15 | 立見里歌 | たつみ りか |
| 16 | 高井麻巳子 | たかい まみこ |
| 17 | 城之内早苗 | じょうのうち さなえ |
| 18 | 永田ルリ子 | ながた るりこ |
| 19 | 岩井由紀子 | いわい ゆきこ |
| 20 | 寺本容子 | てらもと ようこ |
| 21 | 五味岡たまき | ごみおか たまき |
| 22 | 白石麻子 | しらいし まこ |
| 23 | 林香織 | はやし かおり |
| 24 | 三田文代 | みた ふみよ |
| 25 | 吉沢秋絵 | よしざわ あきえ |
| 26 | 赤坂芳恵 | あかさか よしえ |
| 27 | 松本亜紀 | まつもと あき |
| 28 | 横田睦美 | よこた むつみ |
| 29 | 渡辺美奈代 | わたなべ みなよ |
| 30 | 三上千晶 | みかみ ちあき |
| 31 | 矢島裕子 | やじま ゆうこ |
| 32 | 山本スーザン久美子 | やまもと すーざん くみこ |
| 33 | 布川智子 | ふかわ ともこ |
| 34 | 弓岡真美 | ゆみおか まみ |
| 35 | 岡本貴子 | おかもと たかこ |
| 36 | 渡辺満里奈 | わたなべ まりな |
| 37 | 大貫かおり | おおぬき かおり |
| 38 | 工藤静香 | くどう しずか |
| 39 | 高畠真紀 | たかばたけ まき |
| 40 | 生稲晃子 | いくいな あきこ |
| 41 | 貝瀬典子 | かいせ のりこ |
| 42 | 斉藤満喜子 | さいとう まきこ |
| 43 | 守屋寿恵 | もりや としえ |
| 44 | 高田尚子 | たかだ なおこ |
| 45 | 吉田裕美子 | よしだ ゆみこ |
| 46 | 中島早苗 | なかじま さなえ |
| 47 | 山森由里子 | やまもり ゆりこ |
| 48 | 我妻佳代 | あがつま かよ |
| 49 | 吉見美津子 | よしみ みつこ |
| 50 | 杉浦美雪 | すぎうら みゆき |
| 51 | 宮野久美子 | みやの くみこ |
| 52 | 鈴木和佳子 | すずき わかこ |
1つのtableタグだけで完結させてみました。
簡単に書くと、
<style type="text/css">
table.case3 thead, tbody { display: block; }
table.case3 tbody { height: 100px; overflow-x: hidden; overflow-y: scroll; }
table.case3 td:nth-child(1) { width: 25px; text-align: right; }
table.case3 td:nth-child(2) { width: 150px; }
table.case3 td:nth-child(3) { width: 180px; }
</style>
<table class="case3">
<thead><tr><td>・・・</td></tr></thead>
<tbody><tr><td>・・・</td></tr></tbody>
</table>
本来tableタグではcolgroupやcolといった内部タグが存在するのですが、それでセルの横幅やセル内の配置などを設定できませんでした。
ですので、各列をtd:nth-child(n)で設定するほうが極めて楽だと考えるに至ったわけです。
そうすれば、theadとtbodyの垣根も関係ないでしょう。