tableの各セルのwidthを指定するも効かない場合のCSS

更新日：2015年9月20日

tableの全体の幅は簡単に指定することが出来ますが、各セルの幅を指定しようとするとあっさり上手くいく時と、いかない時ってありませんか？

CSSでwidthを指定してみたり、HTMLの方に直接widthを指定してみたり、やむを得えず!importantで指定するもののそれでも幅は上手く制御出来ない。
各セルの幅は確かに変化はしているのですが、明らかに指定している数値ではないんですよね。困った……。

そんな時は、tableにCSSで

table {
	table-layout: fixed;
}

と指定してあげましょう。

これで悩んでいたのが嘘かのように、上手く制御出来るようになります。

ちなみに各セルの幅の制御が効いたは良かったものの、何故か文字が折り返さずに突き抜けたかのようにはみ出してしまうことがあります。

その場合は

table {
	word-wrap: break-word;
}

と追記すれば解決します。

CSSの中でもtableって少し癖があって扱いづらいのですが、この2つのCSSを知っていればハマることも少なくなりますよ。