HTML テーブルがはみ出さない為のタグと設定方法

テーブルタグの幅を整える方法

PHPなどのプログラムで表を作ってしまうと td タグ全てに style="width:10%;" なんて書込む芸当が出来てしまいます。でもコードを見るとやっぱり美しくない。きれいなコードの方が後々のメンテナンスでも工数が少なくて済みます。

テーブルをはみ出させない為の決め事

1. テーブル自体のサイズを％で指定
2. 列ごとに％で幅を指定
3. 文字の折り返しを有効にする

「あれ？上手くいかない？？」
そんな時は大概、何処かで3番の折り返しをOFFにされてる事が多いです。

CSSでテーブルの幅を設定

テーブルそのもののサイズ指定を行うと、どんな画面になってもレイアウトを守ってくれます。

table{
　table-layout:fixed;
　width:100%;
}

colgroupタグとcolタグで調整

colgroupタグを使えば全てのカラムの設定を一括で行えます。
デザイン変更など、修正が必要な時に1か所の修正で済むというのはありがたいですね。

<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>

折り返しの指示

この備忘録を書こうと思った切っ掛けです。
カラムサイズ指定したのにどうしてもズレる。指定されたサイズ(比率)にどうしてもならない。
原因は文字列の折り返しでした...。

table th,table td{
 word-wrap:break-word;
}

＼ 最新情報をチェック ／