CSSだけでテーブルの縦横2列を固定してスクロールできるようにする

完成品のサンプル

CodePenで作ったサンプルです。


See the Pen ScrollTable2 by hyiromori (@hyiromori) on CodePen.

解説

このコードでは`position: sticky1を使用することで、テーブルの行、列を固定しています。

position: stickytop right bottom left と組み合わせて使うことで position: relativeposition: absoluteを組み合わせたような動きが可能になる指定です。

詳細はMDNの解説をご覧ください。

position: sticky の対応状況

Can I Useによれば、モダンブラウザは対応済みです。 ちなみにChromeなどは

Supported on th elements, but not thead or tr

とある通りthead trにバグがあるようです。 このサンプルはthead trに指定していないので、対応ブラウザなら正常に動作するはずです。

幅と高さの制約

position: sticky を使用するため、一部のセルは幅または高さを固定する必要があります。 今回のサンプルは、縦横それぞれ2列を固定するため、以下を固定しなければなりません。

表示上の制約

テーブルの親要素の幅が十分に広い場合、右側に余白ができてしまう場合があります。 これは table {width: 100%} を指定しても解消できませんでした。

WindowのResizeイベントMutationObserver を使って、 ある程度の幅以下になったら横スクロールを適用するという方法で乗り切りました。

ResizeObserverも使えますが、まだまだ対応ブラウザが少ないです。 対応ブラウザが増えたらこちらも使えるかもしれません。

2019-06-12 追記

Safari ではposition: -webkit-sticky;のようにベンダープレフィックスを突けないと有効になりませんでした。 CodePen のサンプルも直しました。