(佐賀→熊本)マークアップエンジニアのググる生活

地方のWEB制作会社で働く、フロントエンドエンジニア。
HTML、CSS、JavaScript(jQuery)、PHP、Smary、EC-CUBE、WordPress、Movable Type等々で解らない時に、Googleで検索したら解決した話や、「閃いた!」などをほとんど自分用にメモとして残すブログです。

※URLがあったら元記事を参照推奨です!
※ほとんどの事は検証はしていますが、あくまでも参考程度にお願い致します!
※記載が不正確であったことにより生じたいかなる損害に関しても、当ブログは責任を負いかねます。自己責任でよろしくおねがいいたします。

タグ:CSS

Tableがどうしても親要素をはみ出す。
ぐぬぬ・・・。どうするんだ、と調べました。



今回は
table-layout: fixed;
ってcssのプロパティを使います。



先日、↓↓↓な感じで半角英数字が折り返されずに、テーブルが親要素をはみ出す場合がありました。

20110908_01


とりあえずまず思いつくのが word-wrap: break-word; や white-space: pre-wrap; ですが、
うーん。tableの中だとなかなか思うようにならず・・・。

そこで、table-layout: fixed; を適用します!




プロパティの詳しい解説は HTMLクイックリファレンス 様にて!

http://rino129.net/?p=246
design actually 様より

widthを1%にしてwhite-space: nowrap;を指定することによって余白を詰めることが出来る!
思いつかなかった・・・ありがとうございます。

ie6以外ならちゃんと表示されるposition absoluteのネガティブ値・・・。


ie6だとなんか消えちゃいます。
たぶん消えるときは親要素にfloat leftがかかってるんじゃないかと。

なので、
<hr />とか<span></span>とか
空タグを「ネガティブ値させたい要素の後」入れて回避させなくちゃなりません・・・。





参考:
http://pinotan.blog15.fc2.com/blog-entry-195.html
http://jmblog.jp/archives/180

このページのトップヘ