レスポンシブ対応したつもりが表だけがはみ出す
すごく初心者的な話かもしれませんが、レスポンシブ対応のサイトで、スマホ表示の際、表だけが、どうしても横をはみ出す感じに・・・・・
なんでかな？親要素との設定もちゃんとしているし、width:100% ってちゃんと書いてあるのにと思ったら、半角の英数字が入っていると折り返さないらしい・・・・
恥ずかしい話ですが、知りませんでした('Д’)
この通り、cssの該当tableの所で、以下のように記載しました。上記のサイト通りなので、書く必要はありませんが、サイトがなくなるといけないので、一応記載
table.hogehoge {
width: 100%;
table-layout: fixed;
word-break: break-all;
word-wrap: break-all;
}
ただ、これをやると変な所で数字が折り返されたりするので、数字の表を見たい場合は、スマホを横にしてみてもらわないと見づらいかも・・・