HTMLで表の横幅を揃える
tableタグはtable-layoutの値がデフォルトで”auto”になっています。その場合、内容にあわせて表の大きさが変わりますが、大きさをそろえたい場合、”fixed”にすれば指定した横幅に合わせてくれるようになります。
ただこの際、セルでword-wrapを指定していないとセルの枠を超えて文字が表示されますので気を付けて下さい。
☆セルに入る文字列が表全体の横幅を越えないのであれば、table-layoutは”auto”でも問題ありません。
table-layoutの値を”auto”にした場合、セルの幅は値が、
・全角文字列の場合
→指定したセルの幅に合わせて自動改行してくれる
・半角文字列の場合
→自動改行してくれず、文字列の長さにあわせてセルの幅が広がってしまう
自動改行して欲しい時は、word-wrapを指定します(IEで対応、FireFoxは3.1から)が、指定しても半角は改行されません。
table-layoutを”fixed”にした場合、セルの幅は以下の
1. col要素, colgroup要素に指定した横幅。
2. col要素, colgroup要素に横幅を明示していない場合は1行目の表のセル要素に指定した横幅。
3. 表のセル要素にも横幅を明示していない場合は表の横幅を表示域の左右いっぱいにまで広げ、列の数に応じて等分割した横幅。
の方法で指定します。
参考URL:
http://w3g.jp/css/table/table-layout
http://w3g.jp/xhtml/dic/col
http://w3g.jp/xhtml/dic/colgroup
http://www.htmq.com/html/col.shtml
トラックバック URL :
コメント (0)