HTML テーブルがはみ出さない為のタグと設定方法
テーブルタグの幅を整える方法
PHPなどのプログラムで表を作ってしまうと td タグ全てに style=”width:10%;” なんて書込む芸当が出来てしまいます。でもコードを見るとやっぱり美しくない。きれいなコードの方が後々のメンテナンスでも工数が少なくて済みます。
テーブルをはみ出させない為の決め事
- テーブル自体のサイズを%で指定
- 列ごとに%で幅を指定
- 文字の折り返しを有効にする
「あれ?上手くいかない??」
そんな時は大概、何処かで3番の折り返しをOFFにされてる事が多いです。
CSSでテーブルの幅を設定
テーブルそのもののサイズ指定を行うと、どんな画面になってもレイアウトを守ってくれます。
1 2 3 4 |
table{ table-layout:fixed; width:100%; } |
colgroupタグとcolタグで調整
colgroupタグを使えば全てのカラムの設定を一括で行えます。
デザイン変更など、修正が必要な時に1か所の修正で済むというのはありがたいですね。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<table> <colgroup> <col style="width: 4%;"> <col style="width: 15%;"> <col style="width: 15%;"> <col style="width: 10%;"> <col style="width: 10%;"> <col style="width: 10%;"> <col style="width: 11%;"> <col style="width: 25%;"> </colgroup> <tbody> <tr> <td>No</td> ... </tr> </tbody> </table> |
折り返しの指示
この備忘録を書こうと思った切っ掛けです。
カラムサイズ指定したのにどうしてもズレる。指定されたサイズ(比率)にどうしてもならない。
原因は文字列の折り返しでした…。
1 2 3 |
table th,table td{ word-wrap:break-word; } |
-
前の記事
Wowma(ワウマ)の出品用CSV(item.csv)項目 2018.08.29
-
次の記事
Wowma!(ワウマ)の出品用CSV(stock.csv)項目一覧 2018.08.29
コメントを残す