2021年6月7日(月)
[CSS]表の見出しの固定 position:sticky; #■パソコン・通信

　position:sticky;で、表の『列見出し』および『行見出し』が固定できるようになって久しいですね。見出しが１セル分の場合は、簡単にできます。しかし、見出しが複数になったり、セル結合で複雑になった場合は、そう単純にはいきません。

　なお、<divstyle="display:table;">のCSSでは、セル結合の表示は、表の入子にするしかなく、煩雑になるので、HTMLの<table>タグを使用します。

　以前から好んで用いている『４つの窓』方式を流用しました。また、表のキャプチャーを前後に設置してみました。JavaScriptが不要になったので、比較的簡単に作成できます。でも、要所要所にコツが散りばめられています。ソースコードをご参考にして、ご活用下さい。

┌──────────────────┐
│┌────────┬───────┐│
││Ⓐ表題　※Ｓ４　│□（全角空白）││
│└────────┴───────┘│
├────────┬─────────┤
│※Ｓ１　　　　　│※Ｓ２　　　　　　│
│┌──────┐│┌───────┐│
││①角見出し表│││②列見出し表　││
│└──────┘│└───────┘│
├────────┼─────────┤
│※Ｓ３　　　　　│　　　　　　　　　│
│┌──────┐│┌───────┐│
││③行見出し表│││④データ表　　││
││　　　　　　│││　　　　　　　││
││　　　　　　│││　　　　　　　││
││　　　　　　│││　　　　　　　││
│└──────┘│└───────┘│
├────────┴─────────┤
│┌────────┬───────┐│
││Ⓐ凡例　※Ｓ４　│□（全角空白）││
│└────────┴───────┘│
└──────────────────┘

※Ｓ１
position:sticky;
top:0px;
left:0px;
z-index:2;
※Ｓ２
position:sticky;
top:0px;
z-index:1;
※Ｓ３
position:sticky;
left:0px;
z-index:1;
※Ｓ４
width:360px;
position:sticky;
left:0px;



例）ごめん・なはり線時刻表のひな形（6月26日バージョンアップ）

<HTML版>
http://neconote.jp/prg/table_sticky.html

<JavaScript版>
http://neconote.jp/prg/table_sticky_js.html

P.S.sticky版の時刻表が完成しました。トップページも改良しました。
http://neconote.jp/gonasen/