制作ノウハウ:テーブル

WEB戦略

CSS & HTML

2011.11.23

制作ノウハウ:テーブル

/*------------------------------------------
テーブルデザインの必須スタイル
------------------------------------------*/
white-space:normal;=要素の最大幅に達すると、折り返す
border-collapse:collapse;=隣接するセルのボーダーを重ねて表示します。

(逆にseparateで隣接するセルのボーダーを間隔をあけて表示することも可能)

以下------------------------
table.table-design{
    white-space:normal;
    border-collapse:collapse;
}
----------------------------

IE8でテーブルの幅を固定したい場合はwhite-space: normal;にする。
 プログラムの関係でwhite-space: nowrap;にしている事が多い


/*------------------------------------------
テーブル以外の要素幅で改行させる(IE6・7のハック)
------------------------------------------*/
white-space:normal;=要素の最大幅に達すると、折り返す
white-space: nowrap;=自動的な折り返しを禁止する

花火大会の時に使用した。
要素の途中で改行になってしまうと表示がズレてしまい手動で<br>タグをいれていたが
white-space: nowrap;
を使えばliなどの要素でも改行されなくなるので幅が足りなければ改行されず下に行きTOPのスポンサー枠などで
適当なところで<br>をいれなくても下に入ってくるため便利。



/*------------------------------------------
テーブルのcssのルール
------------------------------------------*/
tableのtrにcssを指定した時、同じ指定はthやtdには指定できない

このエントリーをはてなブックマークに追加

Page_Up