 |
2009年02月16日 |
colspan使用の注意点
投稿者 : mamoru tanaka
以前から、「お問い合わせ」ページや「ショッピングカート」ページなどを制作する際に
少し複雑なテーブルをつくると、たまにInternetExplorer6でレイアウトが崩れる現象がありました。
調べてみたところ、InternetExplorer6のバグでテーブルに「colspan」が含まれると幅の指定がずれる
ということが分かりました。
少し複雑なテーブルをつくると、たまにInternetExplorer6でレイアウトが崩れる現象がありました。
調べてみたところ、InternetExplorer6のバグでテーブルに「colspan」が含まれると幅の指定がずれる
ということが分かりました。
各々のセルに「width」で横幅を指定しても、同じテーブル内にcolspanを用いたセルがあると
colspanがあるセルの内容が、colspanのないセルの幅に影響を与えます。
下記参考画面の（1）と（2）の表組みは同じものですが
（2）の最下部に注意書きとしてcolspanを用いたセルがあります。
FireFoxでは問題いですが、IE6の場合セルの横幅がずれています。
・IE6
http://www.weblab.co.jp/blog/images/090216_ie.gif
・FireFox
http://www.weblab.co.jp/blog/images/090216_ff.gif
colspanを用いたセルの中の文字数に応じて、ずれたりずれなかったりするようです。
・IE6
http://www.weblab.co.jp/blog/images/090216_ie2.gif
テーブルを切り離すか、colspanを用いないテーブルで入れ子にして回避する方法が考えられます。
colspanを使用する際は注意してください。
colspanがあるセルの内容が、colspanのないセルの幅に影響を与えます。
下記参考画面の（1）と（2）の表組みは同じものですが
（2）の最下部に注意書きとしてcolspanを用いたセルがあります。
FireFoxでは問題いですが、IE6の場合セルの横幅がずれています。
・IE6
http://www.weblab.co.jp/blog/images/090216_ie.gif
・FireFox
http://www.weblab.co.jp/blog/images/090216_ff.gif
colspanを用いたセルの中の文字数に応じて、ずれたりずれなかったりするようです。
・IE6
http://www.weblab.co.jp/blog/images/090216_ie2.gif
テーブルを切り離すか、colspanを用いないテーブルで入れ子にして回避する方法が考えられます。
colspanを使用する際は注意してください。
