wordpressで作っている表の中身がはみ出す
トップページで触れたこのサイトの別バージョンとはまた別に、現在バズ部さんの「XeoryExtension」というテーマを使ってサイトを作成しています。
前回一からテンプレートを作ってみて、レスポンシブ化などの面で非常に苦労したので、今回はちゃんと最初からデザインされているものをカスタマイズしてみたら楽かなという気持ちでの導入です。
確かにデザイン的にはとても美しいのですが、誰か別の人が作ったものをいじると自分が把握していないコードにぶち当たり、いつまでたってもカスタマイズが進展しないことがあります。
今回ぶち当たったのは表の問題。
wordpressの初期設定では挿入したtableはスマホ画面では折り返されず、大きな表は横にスライドさせないと全体像が見えなくなってしまいます。
そこで、
いろいろ調べまして、横並びの表をスマホでは縦型に積むように変えることにしました。レスポンシブ対応のCSSに
th,td{display:block !important;}
を付け足します。
!importantがないと、テーマ既存のCSSが優先して働いてしまうのでうまく作用しません。
表のwidthを１００％で表示させ、
表が縦型になったのはいいのですが、
中身がはみ出してしまうのです。
正直、見栄えが悪いです。こんなことなら表全体が画面からはみ出していたほうがましです。
word-wrapでも解消されない
表、折り返し、CSSで検索した結果、文字の折り返しを制御しているのはword-wrapというプロパティらしいです。
word-wrap:break-word;
で折り返しができるとか。
しかも、表の場合はtableタグにwidthと{table-layout:fixed;}を設定しないと作動しないとのこと。
で、これらを設定するのですが折り返しができない。!importantをつけてもダメ。
さらに折り返し制御には、word-breakというプロパティもあるのだそうです。ブラウザによってword-wrapかword-breakか使いどころが別れるということで、どちらも設定してみたのですがこれもダメ。
余談メモ：
word-wrap:break-word;改行する
word-wrap:normal;改行しない
word-breal:normal改行する
ややこしい…
デベロッパーツールで原因を探す
もうどうしようもないので、デベロッパーツールで該当の表部分を何度もクリックして原因を探しました。CSSをみるとword-breakはちゃんと効いているのに、改行されていないことが分かります。
？？？
？？？
？？？
やっと見つけたwhite-space
そんなとき、ふと目に留まったのがwhite-spaceのCSS。改行について調べていた時、そういえばこのプロパティもあったのです。
white-spaceは空白を制御するプロパティですが、改行の方法を指定する役割があります。
表文字のCSSでwhite-spaceがnowrapになっていたようです。
nowrapはボックスサイズが指定されていても改行をしてくれないんです。
参考元：
これを無効化したら・・・表の中の文字が折り返されました！
無効化の方法は、thとtdに
white-space:normal !important!
を指定し、CSSを上書きするだけです！これですっきりしたスマホ対応の表が表示できるようになりました。
自分が書いたコードじゃないテンプレートを利用していると、どこで制御がかかっているのか見抜くのがとても困難ですね。
