幅100%レスポンシブテーブルのはみだしを消す方法
要因としては主に２つです。
- デフォルトで折り返し出来ない文字
- table幅 auto が幅100%より優先される場合
文字の強制折り返し
一番多いのは英字や一部半角記号、URL等が折り返せない場合です。逆に言えばこれは強制折り返しを入れれば解決します。
overflow-wrap: break-word;
これを入れれば基本単語折り返しせずに狭すぎる場合のみ折り返します。基本的には次の強制折り返しより推奨です。
word-break: break-all;
もう一つはこれで、完全な強制折り返しです。問答無用で狭くなった部分で折り返しします。
幅の最小を100%にする
width: 100%指定かつ「文字の強制折り返しを入れている。または日本語しかない」のにそれでも横幅を突き抜ける場合、問題になっているのはテーブルの幅が width: 100% を無視してデフォルトの幅調整 auto が優先される為です。
その場合、最小幅を100％にすると解決します。
min-width: 100%;
たったこれだけです。
つまり width: 100%; min-width: 100%; を table に指定すれば良いです。
この場合
box-sizing: border-box; を入れても解決はしません。必要なのは min-width: 100%; です。
諦めて横スクロールした方が良い
ただし、100px～200pxとかまで狭くなるならば流石に横スクロールした方が良いです。
日本語や強制breakの場合１文字や2文字でもちゃんと縮まるくらい強制力があります。
そういった場合はテーブルに最小幅を指定した上で、その table を div で囲み
overflow-x: auto;
を div に入れてください。
0 件のコメント:
コメントを投稿