HTML 上部を固定したい（スクロール）

情報量が多い表の為　スクロールして閲覧しますが、
そのままだとヘッダー情報が隠れてしまい見えづらくなってしまいます
ヘッダーを固定したいのですが　それだけならばcss にて実現できていますが
テーブル１　テーブル２が存在し、
テーブル１はすべて固定　テーブル２のthのみ固定にしたいのです

よろしくお願いします

質問者からの補足コメント

• やってみました
  うまくいきません
  
  tabe1はほぼ固定されていますが
  table2は　table１の高さ半分くらいに潜り込み
  その状態でthが固定されてしまいます・・

  No.1の回答に寄せられた補足コメントです。 補足日時：2021/07/27 22:41

No.2 ベストアンサー 回答者： Ogre7077 回答日時： 2021/07/28 17:13

No.1の回答の補足に対して

テーブル1と2の形状が不明なので確たることは言えませんが、
単純に th が粘着する位置を調整するだけではないでしょうか?
例) top:2em → テーブル1の縦幅

余談ではありますが、
粘着する要素には、その他の要素との重ね合わせのために、
background や z-index なども調整が必要ですのでご配慮ください。

この回答へのお礼

やはり
上手く動作しません

セル内にテーブルを作成し　
”2行”を固定する方法で対処出来ました

お礼日時：2021/07/28 18:28

No.1 回答者： Ogre7077 回答日時： 2021/07/27 18:37

全体を囲って、個々の要素に粘着位置を指定してはいかがでしょうか?

https://developer.mozilla.org/ja/docs/Web/CSS/po …

<style>
section { displahy:relative; }
#one { position:sticky; top:0; } ← 上端に粘着
#two th { position:sticky; top:2em; } ← #one の下あたりに粘着
</style>

<section>
<table id=one> ... </table>
<table id=two>
<tr><th>A<th>B
<tr><td>1<td>2
...
</table>
</section>

この回答へのお礼

なるほど
そのような考え方があるのですね

明日実行してみます　ありがとうございます

お礼日時：2021/07/27 22:00