スリ飯屋MaLankaのフリーエンジニアな日々

このブログでは、フリーランス4期目となる自身の実体験から、フリーランスエンジニアになるためのノウハウ、ブログやプログラミング技術、沖縄移住やリモートワークライフについて発信しています。

【レスポンシブ】table要素がスマホで横幅がはみ出る場合

【レスポンシブ】table要素がスマホで横幅がはみ出る場合




背景

PCでは問題ないが、スマホだとtableが横にはみ出してしまう。

調べていると、この記事で以下のように書かれていました。 https://www.netimpact.co.jp/diary/20607/

セル内に英単語が入っていた場合、単語の途中で折り返さないため、それが邪魔をしてスマホで見た時にセルが小さくならない事があるからです。 スタイルシートに記述する場合は以下のようにしてください。

と紹介されていたcssを適用。

.hoge {
  width: 100%;
  table-layout: fixed;
  word-break: break-all;
  word-wrap: break-all;
}

手順

上記の、

.hoge {
  width: 100%;
  table-layout: fixed;
  word-break: break-all;
  word-wrap: break-all;
}

を適用すると、

スマホでも横幅が正常に表示されました。

感謝です。

レイアウト、スマホ対応苦手だなあ。。

  • 参考

word-break-スタイルシートリファレンス

table-layout-スタイルシートリファレンス