【CSS】縦横スクロールテーブルのキャプションを左上に固定したい

テーブルを横にスクロールさせても見出し（tbody th）は固定させていますが、左上に表示されているキャプションは td と一緒にスクロールされて見えなくなります。
テーブルのキャプションを固定させる方法で、何か良いアイデアはないでしょうか？

・左に固定しているtbody th と同じCSSにしてもダメだった
・align は非推奨なので避けたい
・caption-side ではムリ
・position は 「absolute」「relative」「sticky」 を試したけど上手くいかず
（位置の指定方法が間違っていた可能性はアリ）

そもそもキャンプションの固定なんてムリなんでしょうか？

No.1 回答者： fujillin 回答日時： 2019/06/25 14:29

こんにちは

回答が無いみたいなので・・・


質問者様がどのような方法を取っているのかまったくわからないので、同じ方法なのかどうかもわかりませんが、試してみました。
基本的には、 position:sticky にすることで、項目行と項目列を固定する方法です。

captionを最上部に表示するのものとして、
　・captionをdisplay:blockにして、高さを設定
　・captionをposition: sticky;で固定
　・captionの高さ分だけ、theadの位置を下げる
ことで、項目行と同様に固定することができました。

一方で、スクロールした際にキャプションに重なって、表の部分が上を通り過ぎてしまうので、キャプションを上にし、さらに下が透けて見えないように背景に色を付けておけば良さそうです。


ということで、実際に、試してみたCSSは以下です。ご参考まで。

caption {
　display: block;
　line-height: 2em;
　background: #FFF;
　position: sticky;
　top: 0; left: 0;
　z-index: 10;
}

この回答へのお礼

ありがとうございます。
回答をヒントにどうにか解決できました。
caption内にブロック要素を2つ設置することで、イメージ通りになりました。

お礼日時：2019/06/26 20:37