表組のヘッダー，フッターの方法

質問

下記サイトの表組上部の緑の部分をヘッダー、下部の黄緑の部分をフッターとして固定するにはどうすればよいのでしょうか？
http://shinsama1980.web.fc2.com/katsufutaba-data.htm

至急宜しくお願い致します。

回答No.2

retorofan · ベストアンサー

まず、</head>タグの直前に下記のCSSを追記します。
<style>
/* 2023-03-03 追加箇所 */
table.style68 {
position: relative;
height: 40vh;
}
table.style68 tr td {
font-size: 90%;
white-space: nowrap;
}
thead {
top: 0;
position: sticky;
height: 56px;
}
tbody {
height: 50vh;
overflow: auto;
}
tfoot td {
position: sticky;
bottom: 0;
height: 100px;
}
</style>
</head><!-- この直前 -->

次に、テーブルタグのTRを下記のように３つに分けます。

<table class="style68">
<thead><!--初めから TRを２個挿入 -->
<tr>
　・・・・・
</tr>
<tr>
　・・・・・
</tr>
</thead>
<tbody>
<tr>
　・・・・・
</tr>
</tbody>
<tfoot>
<tr><!-- 最後のTRを１個挿入 -->
　・・・・・
</tr>
</tfoot>
</table>

つまり、THEAD, TBODY, TFOOTの各々のタグを挿入するわけです。
以上で、目的は達成される筈です。

お礼

返信いただきありがとうございます。

実は先日質問した内容はほぼほぼ解決したのですが、
今は別の問題に直面したので、また改めて質問とし挙げさせていただきます。

回答No.1

AsarKingChang

緑の部分が下の表と同一のレイヤーになってるので、
まず分離して、別レイヤーにします。
そして、固定したい方のレイヤーに
position:absolute;やfixedで位置を固定しつつ。
レイヤー順番をzindexで制御。
これで、固定されます。

お礼

ありがとうございます。
是非参考にさせていただきます。