【レスポンシブ】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;
}
を適用すると、
スマホでも横幅が正常に表示されました。
感謝です。
レイアウト、スマホ対応苦手だなあ。。
- 参考