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

IT実務未経験から約1年、東京でフリーランスのRuby on Railsエンジニアに転職。約2年半、大阪中崎町でスリランカカレーの間借りしてました。フリーランスエンジニアになるためのノウハウ、スリランカの事を発信していきます。

【レスポンシブ】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;
}

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

感謝です。

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

  • 参考

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

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