IE8でテーブルのpaddingがおかしかったけどtable-layout: fixed;で治った【その後追記あり】

IE8でテーブルのthやtdの paddingが計算されていないような挙動をしていた。
でも

table-layout: fixed;

で治った。

【追記】
だけど描画方法を直すと横幅の見た目が変わるので注意が必要。

そもそもの原因は、
table-layout: fixed;が無い状態で、
paddingを設定したtdの隣のtdのpテキストが、
横幅より長かったのがいけなかったらしい。なんだそれ……。

下記みたいな▼▼
td class=”index”にwidthとpaddingを設定した
ソースを

						<table class="formtable">
							<tr>
								<td class="index"><br></td>
								<td colspan="3">
									コンテンツ
								</td>
							</tr>
							<tr>
								<td class="index"><br></td>
								<td colspan="3">
									<p class="attention">長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト</p>
								</td>
							</tr>
						</table>

こんなふうに▼▼
二つのテーブルに分けたら解消した。なんでやねん……。

						<table class="formtable">
							<tr>
								<td class="index"><br></td>
								<td colspan="3">
									コンテンツ
								</td>
							</tr>
						</table>
						<table class="formtable">
							<tr>
								<td class="index"><br></td>
								<td colspan="3">
									<p class="attention">長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト</p>
								</td>
							</tr>
						</table>

【2015年1月追記】
IE8限定の現象。
tableのtdに対してbox-sizing:border-boxを設定した状態で、
横のpaddingを%で指定するとうまくいかない。
こちらは、px指定にすることによって回避。

参考サイト様
http://www.htmq.com/style/table-layout.shtml
http://html-coding.co.jp/knowhow/tips/000219/

投稿者:

ayako0802

フロントエンドエンジニア