ちょっと良いUIおれおれAdvent Calendar 2024 – 17日目
表が大きくてスクロールするとき、各行列の見出しは常に見えていてほしいなと思っています。かつては JavaScript でごりごりやるしかありませんでしたが、現在は CSS でまあまあ簡単にできるのでやっておいてもらえませんか。
デモ：
position: sticky で固定
文章の見出しと同様、表の見出し（という表現で正しいのか知らんですけど）も position: sticky で固定できます。
縦横を考えるとちょっとややこしいですがまあやれないことはないです。
それより罫線が出てこないという問題があります。これは border-collapse: collapse が指定されているときに発生します。対応策としては、あんまりコードも見た目も綺麗じゃないんですが、border-collapse を使わない（初期値 separate にする）必要があります。また border-spacing: 0 も必要でしょう。
.table {
border-spacing: 0;
}
罫線の向きを工夫することで見た目はだいぶ良い感じになるので、デモを見てみてください。
おしまい
デモのデータは思い付かなかったのでので AI (GitHub Copilot) に作ってもらいました。サンキュー☆