浅井ブログ

列が多いテーブルを表示した際に、スマホサイズだと表の左右が見切れてしまい、横スクロールもできない状態になったのを解消しました。
下記スタイルのクラスをあてたラッパーdivでテーブルを囲むことで解消できました。

.table-scroll-x{
  overflow-x:scroll;
  max-width: 100vw;
}

max-widthに100vwを当てることで、ラッパーの横サイズが固定され、中のテーブルがはみ出した場合にスクロールできる仕組みのようです。

スマホサイズにした時にテーブルがはみ出て表示できない問題があったけど、テーブルの横スクロール用ラッパーdivにoverflow-x:scroll;とmax-width: 100vw;を当てたら横スクロールできるようになった！ pic.twitter.com/QSExclj0WR

— 浅井 (@acai_it_life) June 3, 2025