熊本のウェブ制作会社のエンジニアのググる生活

地方のウェブ制作会社(元:佐賀・今:熊本)で働く、エンジニア。
HTML、CSS、JavaScript、PHP、Smary、Twig、EC-CUBE、WordPress、Movable Type 等でお仕事してます。
ググって解決した話や、自分で考えて分かったことなどを、自分用にメモとして残すブログです。

※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

このページのトップヘ