ガレコレ [Garage Collection]
2021年6月7日(月)
[CSS]表の見出しの固定 position:sticky; #■パソコン・通信
 position:sticky;で、表の『列見出し』および『行見出し』が固定できるようになって久しいですね。見出しが1セル分の場合は、簡単にできます。しかし、見出しが複数になったり、セル結合で複雑になった場合は、そう単純にはいきません。

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

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

┌──────────────────┐
│┌────────┬───────┐│
││Ⓐ表題 ※S4 │□(全角空白)││
│└────────┴───────┘│
├────────┬─────────┤
│※S1     │※S2      │
│┌──────┐│┌───────┐│
││①角見出し表│││②列見出し表 ││
│└──────┘│└───────┘│
├────────┼─────────┤
│※S3     │         │
│┌──────┐│┌───────┐│
││③行見出し表│││④データ表  ││
││      │││       ││
││      │││       ││
││      │││       ││
│└──────┘│└───────┘│
├────────┴─────────┤
│┌────────┬───────┐│
││Ⓐ凡例 ※S4 │□(全角空白)││
│└────────┴───────┘│
└──────────────────┘

※S1
 
 
 
 
position:sticky;
 
 
 
 
top
 
:0px;
 
 
 
 
left:0px;
 
 
 
 
z-index:2;
※S2
 
 
 
 
position:sticky;
 
 
 
 
top
 
:0px;
 
 
 
 
z-index:1;
※S3
 
 
 
 
position:sticky;
 
 
 
 
left:0px;
 
 
 
 
z-index:1;
※S4
 
 
 
 
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/
 
お問い合わせ


by Network Communication Note