サイト作成中にテーブルの幅をcssで揃えているのに
何故か幅がおかしくなることありませんか？
レスポンシブでPCでは問題なくても
スマホでおかしくなったり、、、と。
いろいろと調べてみたのですが、原因がわからず、
ずっと表を見ているとあることに気が付きました。
英単語が入ってるセルが、英単語に合わせて
セル幅が広がっているのでは？っと。
そこでHTML5より使えるようになった<wbr>を使って
意味の通じる部分で英単語を改行してみたところ
テーブルの幅がcssどおりに！
単純なことですが、なかなか気が付かないことも。。
ここに気がつくまでに数時間はかかったかと。
cssを見直し、他に原因がないかいろいろとチェックしたりと、、、
テキストは流し込みしてたので、なかなかそこに気が付かなった。。
自分用の備忘録として、また初心に戻って全体を見直すことも
必要だなっと反省を込めて。。。
もし同じようなことで、いろいろと検索して困っている方の
ヒントとして、少しでもお役に立てたら良いなという気持ちも込めて。
コメント