上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
 前回までで、テーブルタグはあらかた使えるようになりました。
(最初から読むには「テーブルタグを理解してみる」から。)
 しかし、デザイン部分でテーブルを細かく制御しようとすると、今まで紹介したスタイルシートでは限界が出てきます。
 ブラウザによって、あまりにも表示が違ったり、横幅(width)指定しているのに、全く言うことを聞かない。なんてことが発生してきます。
 これを「ある程度」制御する方法があります。


テーブルの表示のされ方

 テーブルは、画面に表示される前に、テーブル内に入っているテキストなどの大きさを測り、コンピュータ側で枠の大きさを「整形」するように出来ています。

 例えば、以下のようなバランスの悪い表示にならないように、自動で調節するのです。

*こんなおかしな表示にならないよう…











*コンピュータ側で自動調整。
あめあめふれふれあさんが…

 しかし、逆にこれのおかげで、意図しない表示になってしまう場合があります。
 この、「自動処理」をある程度手動でコントロールできるようにする「命令文」がスタイルシートにはあります。


テーブルレイアウト

table-layout :auto ;自動調整
fixed ;一番上の列に揃える

 デフォルトでは「auto」になっていますから、これを「fixed」にすれば、細かく横幅、「width」指定が出来るようになります。
 これは、表の「一番上の列」にしか指定できません。2列目以降は、一列目の表示に従います。

 つまり、結局「auto」は、すべての列でバランスを自動で取るモード。
 「fixed」は、一番上が決まったら、他の列ではバランスを取らないモード。と言うわけです(かな?)

 古いブラウザや、マッキントッシュではサポートしていない場合があるそうなので、完璧というものではないようですが…
 ある程度レイアウト的に使いたい場合は重宝するかもしれません。
 とにかく、テーブルタグの中身のテキストなどは、意地でも強引に表示しようとするイメージがあるので…予想外の時に、予想外の描写をされて、困ることがあるかも…。


 変な表示になったときは?
■おまじない命令文をスタイルシートに追加

zoom:100%;
word-break:break-all;

■連続したテキストの間に、改行やスペースを入れてみる。

 などなどが、たまにうまく行く呪文のようです☆
このエントリーをはてなブックマークに追加
Thu.04.22.2010
Comment
Trackback
Comment Form
質問するときは?
  • 不具合が出ているページのURLを書き込む。
  • 使っているブラウザ(IE、Firefoxなど)を書き込む※IE6はサポート外です。
  • 次の人が確認できるように、使っているテンプレートの記事ページ、或いは各カスタマイズ記事ページにコメントを書きこむ。
コメント時の注意
やっぱり自分で解決したい時
特定の記事のみでレイアウトが崩れる場合
全ページでレイアウトが崩れる場合
メールフォーム
Bookmarks
Page Top
Copyright © SAKILab All Rights Reserved.
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。