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

このブログでは、フリーランス5期目となる自身の実体験から、フリーランスエンジニアになるためのノウハウ、ブログや沖縄移住、スリランカの最新情報について発信します。

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

※記事内に提携先企業のアフィリエイト広告(リンク、バナー等)、Google広告を含む場合があります

【レスポンシブ】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-スタイルシートリファレンス