要件
htmlページで大きなテーブルをスクロールバー付きの小さいボックスに収める。
ヘッダー見出し行および列はスクロールしても動かないようにする。というもの。
実装
codepen 埋め込みが小さいのでHTMLタブをオフって下さいorz
See the Pen Untitled by cfd-ack (@cfd-ack) on CodePen.
確認済み
Chrome: 103.0.5060.114
FireFox: 102.0.1
※これでもまだ業務レベルで使えないので、さらに改良を入れる予定。（要javascript）
ポイント（多い・・・
- table {border-collapse: separate;} // collapse では色々問題がある模様
- table {border-spacing: 0;} // デフォルトで空いているのが意味不（個人的な感想です）
- table {table-layout: fixed;} // 列幅を固定するのに必須
列幅を動的にすると行ヘッダの２列目以降の sticky left にjavascript必須 - table {box-sizing: border-box;} // 列幅の指定を罫線とpadding込みでの指定にする
ブラウザのデフォルトで指定されている模様・・・ - thead {position: sticky; top:0;} // ヘッダ行(複数)をスクロール固定
- table の幅は各列の幅の合計と同じにする（めんどいけど複数列の行ヘッダでは必要）
- 列幅は colgroup/col で指定、nth-child(i) を使えばクラス名を生やさなくてもいける。
- 行ヘッダ横スクロール固定も nth-child(i) を使用して sticky とし、left はそれまでの累積。
セルの結合 colspan/rowspan による「被結合セル」は display:none にしている。
このため nth-child がズレることはない。
（結合に関わらず行列の数に合わせたセル td/th を生やし、display:none を適用。
動的に結合を変更するのも楽。rows/cellsコレクションのインデックスも単純明快に。
これはIEや旧Edgeでも有効なTipsなんだけどヨソで見たことない・・・）
感想
浦島だったhtml5および最新のスタイルシートでは割と楽に実現できるようになっていた。
ただ、業務レベルで使用するきっちりした見栄えの表を目指したら結構大変だった。
※ググって調べた各種サイトのものでは不満足だったので、試行錯誤した。
（技術系の調査だと昔に比べてGoogle先生が腐っている場合が多いような・・・