IE6 バグ table td colspan paddingの組み合わせ

質問

Internet Explorer6ではテーブルにCOLSPANが指定されたセルが含まれるとcolspanを含まないセルの幅の指定がずれるというバグがあるようです。

特にこのバグは、テーブルの一段目の行の全てのセルがcolspanで結合され一つのセルになっている場合、顕著に現われるようです。

このバグは、テーブルに含まれる全てのセルにwidthを指定することである程度防げるようですが、全てのセルにwidthを指定しても、一段目のcolspanのあるセルの左右にcssでpaddingを指定しているとそのテーブルのcolspanを含まないセル（一段目以降のセル）の幅がずれてしまいます。

このバグをどのようにして回避するか、ご存知の方はおられますか？
よろしくお願いします。

キャサリン

回答No.1

mezashi2000 · ベストアンサー

こんにちわ。

>一段目のcolspanのあるセルの左右にcssでpaddingを指定していると・・・

IEのpadding解釈はおかしいです。
出来るだけ、IEでpaddingは使わない方がいいかもしれません。

さて、上記のことですが Colspanセル に padding を適用するということは、中身の左右や上下に空間を作りたいということですよね？
それも、<table>全体のセルではなくそのセルだけに。

こういう方法はどうでしょうか？
<tr>
<td colspan="2" width=200px>
<div style="width:180px;maegin:10px;">中身</div>
<td>
</tr>
<tr>
<td width=100px></td>
<td width=100px></td>
</tr>

つまりColspanの中身を<div>タグでくくり、そのDIVの外側の余白として margin で余白を指定するというやり方です。
モチロン、Colspanのセル幅に対して余白分を考えた<DIV>の横幅に設定してくださいね。

補足

mezashi2000さん

ご回答ありがとうございました。
<div>とマージンとの組み合わせとは、なかなかのアイデアですね。
参考になりました。

もう少しいろいろなアイデアを他の方からもお聞かせ願えると助かりますので、スレッドはこのままもう少しOpenにしておきます。

キャサリン