widthでtableの幅がうまく指定できない時の対策

主に古いIEとかで起こるっぽいのですが、たまにテーブルの幅を width で指定してもうまく効いてくれないことがあります。

そんなときの対処法についてのメモです。

例えば、親となる要素（幅指定有り）のなかに、幅100%のテーブルを作るとします。

html

<div id="wrapper">
	<table>
		<tr>
			<td>foo</td>
			<td>bar</td>
		</tr>
	</table>
</div>

<table>

<tr>

</tr>

</table>

</div>

CSS

#wrapper {
	width:600px;
	margin:auto;
}
#wrapper table {
	width:100%;
}

#wrapper {

width:600px;

margin:auto;

}

#wrapper table {

width:100%;

}

自分が遭遇した状況というのはもう少し複雑な構造ですが、だいたいこんな感じの構造で作成してIE8で見たところ、期待していた表示は、 wrapper の中での 100% 、つまり、横幅 600px で中央にテーブルが入って欲しかったのですが、実際にはどういうわけかやたら横幅の長いテーブルが wrapper の中に入り、右側におもいっきりはみ出してしまいました。

こういうときは、table のスタイルシートに、「table-layout:fixed;」を指定すると、あら不思議。

きちんとはみ出さなくなりました。

CSS（修正）

#wrapper {
	width:600px;
	margin:auto;
}
#wrapper table {
	width:100%;
	table-layout:fixed;
}

#wrapper {

width:600px;

margin:auto;

}

#wrapper table {

width:100%;

table-layout:fixed;

}

IEとかでうまく幅指定が効かない場合は、試してみて下さい。

時間もあまりないのでどういう理屈で直ったのかまでは調べていませんが、とりあえず対処法だけでも、と思い書いておきます。

詳しくは、また時間のあるときにでも気が向いたら…。