Page symbol image
hyiromori's Blog
Web系エンジニア hyiromori のブログです

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

完成品のサンプル

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


See the Pen ScrollTable2 by hyiromori (@hyiromori) on CodePen. ## 解説 このコードでは`position: sticky1を使用することで、テーブルの行、列を固定しています。 `position: sticky` は `top` `right` `bottom` `left` と組み合わせて使うことで `position: relative` と `position: absolute`を組み合わせたような動きが可能になる指定です。 詳細は[MDNの解説](https://developer.mozilla.org/ja/docs/Web/CSS/position#Sticky_positioning)をご覧ください。 ## `position: sticky` の対応状況 [Can I Use](https://caniuse.com/#feat=css-sticky)によれば、モダンブラウザは対応済みです。 ちなみに**Chrome**などは > Supported on th elements, but not thead or tr とある通り`thead` `tr`にバグがあるようです。 このサンプルは`thead` `tr`に指定していないので、対応ブラウザなら正常に動作するはずです。 ## 幅と高さの制約 `position: sticky` を使用するため、一部のセルは幅または高さを固定する必要があります。 今回のサンプルは、縦横それぞれ2列を固定するため、以下を固定しなければなりません。 * 1行目の高さ(2行目の`top`を指定しないと固定できないため) * 1列目の幅(2列目の`left`を指定しないと固定できないため) 実際に使用する場合は、これらのセルを指定した幅と高さで必ず収まるように要素を配置しないといけません。 ## 表示上の制約 テーブルの親要素の幅が十分に広い場合、右側に余白ができてしまう場合があります。 これは `table {width: 100%}` を指定しても解消できませんでした。 [WindowのResizeイベント](https://developer.mozilla.org/en-US/docs/Web/API/Window/resize_event) や [MutationObserver](https://developer.mozilla.org/ja/docs/Web/API/MutationObserver) を使って、 ある程度の幅以下になったら横スクロールを適用するという方法で乗り切りました。 [ResizeObserver](https://developer.mozilla.org/ja/docs/Web/API/ResizeObserver)も使えますが、まだまだ対応ブラウザが少ないです。 対応ブラウザが増えたらこちらも使えるかもしれません。 ## 2019-06-12 追記 Safari では`position: -webkit-sticky;`のようにベンダープレフィックスを突けないと有効になりませんでした。 CodePen のサンプルも直しました。