テーブル(表)から文字がはみ出す
テーブルで表を作った時にこんなことに・・・
メールアドレスが長いことでテーブルもバランスがおかしくなっています。
widthで幅を付けても動きません。
HTMLはこんな感じです。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<table> <tbody> <tr> <td>メールアドレス</td> <td>meruadoresumeruadoresueruadoresueruadoresu@gmail.com</td> </tr> <tr> <td>電話番号</td> <td>000-0000-0000</td> </tr> </tbody> </table> |
これはもともとの仕様で、英文が意図せぬ部分で変な改行をしないために、ざっくり言うと「スペースや – や . , の記号が入っていないところには改行させない」というものです。
word-break: break-allで改行を許可させる
「スペースや記号が入っていないところには改行させない」ルールを突破するにはword-break: break-allをつければOKです。
|
1 2 3 |
table td { word-break: break-all; } |
これで英文(メールアドレス)が自動的に改行されるようになりました。
widthで幅も自由に指定することができます。
レスポンシブでtableのレイアウトを維持する
tableにtable-layout: fixedで、widthで指定した値で固定して表示できます。
さらにwidth: 100%ではみ出させないようにします。
|
1 2 3 4 5 |
table { word-break: break-all; table-layout: fixed; width: 100%; } |
これでだいたいOKだと思います。
あとは必要に応じてborder-collapse: collapseや border-spacing: 0でデザインを整えると完成です。
コメント