最近便利なCSSおれおれAdvent Calendar 2023 – 17 日目
大きな表ってスクロールするとヘッダーが見えなくて「この値は何だっけ」ってなりますよね。position:sticky が出たときは便利じゃんと思ったのに表には使えませんでした。今は行けます。行こう。
例
th {
position: sticky;
top: 0;
}
ヘッダーだけじゃなくて、一番左側の列を固定するのも良いかも。
付与先
<th> に付けるのが普通かなと思うんだけど、<thead> とかに付けてもいいです。
注意
overflow: hidden ではなく overflow: clip を
position: sticky を書いても位置が粘着しない場合、だいたい上位に overflow: hidden があるのが原因です。
レイアウトの都合上はみ出すとよろしくないので付けてるんだと思うんですが、overflow: hidden は overflow: scroll と同じくスクロール機構 (scrolling mechanism) を発生させるので、position はその中での浮遊を行うようになります。
単にはみ出した分を隠したいなら、代わりに overflow: clip を使ってください。
位置指定
top:0 をお忘れなく。
各行先頭セルで使って横スクロールも考えるなら left:0 も。
背景色
位置の指定だけなので、背景がないと透けて見えづらくなります。
まあ見ればわかるのですぐ気付くと思うけど。
おしまい
良い時代になりました……と言いたいが付いてないことが多いので皆さんどんどんこれ付けてほしいです。セレクターはもうちょっと重めでもいいかも。