スタイルシート「table-layout」

/ 産業システム部　

中村（次） (2009年12月16日 13:15)
産業システム部

table-layoutは、表のレイアウト方法を指定するプロパティです。

・auto
テーブル（表）の列幅を自動レイアウトにする

・fixed
テーブル（表）の列幅を固定レイアウトにする
※表全体の列幅の指定が必要となります

今回画面の文字サイズをJavaScriptで動的に切り替える処理を行っていたのだが、
文字のサイズが大きい場合と、小さい場合では、どうしても画面のデザインが崩れてしまっていました。

そこで、「table-layout:fixed」を使用して、テーブルの列幅を固定して対応しました。
そうすることにより、セル内の文字の大きさが変わったとしても、列幅は変わらないので、
デザインも崩れることがなくなりました。

それ以外にも、明細を表示する際に、ヘッダーと明細を別々のテーブルで作成した場合など、
まったく同じ列幅で作成しても、微妙にずれたりする場合がありますが、それも対応できます。

また、明細に出力する項目が全角か英字かで列幅が大きくなったりする場合もありますが、
それも、「table-layout:fixed」を指定することで対応できます。

テーブルの列幅をちゃんと指定しているのに、何故か微妙にずれてしまうというときは、
このプロパティを使ってみてください。

ちなみに、autoは表全体を読み込んだ後に、表の表示を開始し、
fixedは表の1行目を読み込んだ時点で、列幅を決定し、直後に表の表示を開始するので、
fixedの方が表が素早く表示されるようです。

「システム開発ブログ」へのコメントやご意見等ありましたら、ファンページまでお願いします。 Facebook のファンページ

[PR]
他社のシステムも直します。資産を活かしてシステムリフォーム

システムのトラブル解決を承ります。すぐにシステムリフォームを体験できます

システム開発のアイロベックス（東京都新宿区）