レスポンシブサイトを制作する際、「tableタグ」でつまずくことが多いかと思います。
長さ指定を行うと、端末の幅を越えてしまう…
今度は長さを指定しないと自動的に文字数分の流れになってしまう…
このような現象はありませんか？
tableタグは長さを指定しないと自動的に幅を詰めてしまうものの、一方で詰める加減は中身の文字数に影響を受けます。
これによって何かしら長さを指定する必要がありますが、長さを指定してしまうと、どういった端末でもその幅を守ります。そして画面幅を越えてしまいレイアウトが破壊されてしまうトラブルが起きます。
■横方向に内容が多くある場合、最低幅の関係で端末幅を越えてしまう問題
スマホは以前よりもサイズが大きくなっているものの、それでもPCと比較しまだまだ解像度的に小さいです。
そのため、table内の内容が横に多い場合、最低限要する幅が大きくなり、画面内に入りきらない状態になります。
≪この問題への対処法1≫CSSでの解決
まずはPC用もモバイル用もtable幅をCSSのみで設定する方法です。「thタグ」や「tdタグ」では長さ指定を行わず、「display:block;」を指定します。
thやtdタグは何も明示がない際、display属性に「table-cell」という値を持っているのです。
こちらをblockと指定することにより、divタグのような形で、その場所で取れる最大横幅を確保してくれます。
これによって、table内の文面ボリュームに関わらず。画面幅内でテキストが折り返されるように変わるのです。こちらの対処法はいかがでしょうか？
その他の対処法に関しましては参考サイトにてご覧になれます。