表を作成中にどうしても幅が揃わない

サイト作成中にテーブルの幅をcssで揃えているのに
何故か幅がおかしくなることありませんか?

レスポンシブでPCでは問題なくても
スマホでおかしくなったり、、、と。

いろいろと調べてみたのですが、原因がわからず、
ずっと表を見ているとあることに気が付きました。
英単語が入ってるセルが、英単語に合わせて
セル幅が広がっているのでは?っと。

そこでHTML5より使えるようになった<wbr>を使って
意味の通じる部分で英単語を改行してみたところ
テーブルの幅がcssどおりに!

単純なことですが、なかなか気が付かないことも。。
ここに気がつくまでに数時間はかかったかと。
cssを見直し、他に原因がないかいろいろとチェックしたりと、、、
テキストは流し込みしてたので、なかなかそこに気が付かなった。。

自分用の備忘録として、また初心に戻って全体を見直すことも
必要だなっと反省を込めて。。。

もし同じようなことで、いろいろと検索して困っている方の
ヒントとして、少しでもお役に立てたら良いなという気持ちも込めて。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です