IE6 バグ table td colspan paddingの組み合わせ
- Internet Explorer6ではテーブルにCOLSPANが指定されたセルが含まれるとcolspanを含まないセルの幅の指定がずれるというバグがあるようです。
- このバグは、テーブルの一段目の行の全てのセルがcolspanで結合され一つのセルになっている場合、顕著に現われるようです。
- このバグをどのようにして回避するか、ご存知の方はおられますか？
- ベストアンサー
IE6 バグ table td colspan paddingの組み合わせ
Internet Explorer6ではテーブルにCOLSPANが指定されたセルが含まれるとcolspanを含まないセルの幅の指定がずれるというバグがあるようです。 特にこのバグは、テーブルの一段目の行の全てのセルがcolspanで結合され一つのセルになっている場合、顕著に現われるようです。 このバグは、テーブルに含まれる全てのセルにwidthを指定することである程度防げるようですが、全てのセルにwidthを指定しても、一段目のcolspanのあるセルの左右にcssでpaddingを指定しているとそのテーブルのcolspanを含まないセル（一段目以降のセル）の幅がずれてしまいます。 このバグをどのようにして回避するか、ご存知の方はおられますか？ よろしくお願いします。 キャサリン
- kitty1000
- お礼率58% (353/606)
- HTML
- 回答数1
- ありがとう数2
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
こんにちわ。 >一段目の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>の横幅に設定してくださいね。
関連するQ&A
- [table] colspanについて
画像添付にあるようなセル区切りのtableをhtmlで作成したいと考えています。 4列目にセルが４つあるので、3列目のcolspanの指定をどのように記述すればいいのか 不明で困っています。 ---------------------------------------------------- <table> <tr> <th></th> <th colspan="3"></th> </tr> <tr> <td></td> <td colspan="3"></td> </tr> ▼▼▼▼▼この列のrowspanの指定がわからない▼▼▼▼▼ <tr> <td></td> <td></td> <td></td> </tr> ▲▲▲▲▲この列のrowspanの指定がわからない▲▲▲▲▲ <tr> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td colspan="3"></td> </tr> </table> ---------------------------------------------------- どなたか解決案をご存知の方、お教えいただけないでしょうか？ colspanにこだわっているわけではないので、cssで解決できるのであればcssでも大丈夫です。 よろしくお願い致します。
- ベストアンサー
- HTML
- <table>の colspanについて
<table border=1> <tr><td colspan=2>aaaaaaaaaaaaaaaaa</td></tr> <tr><td colspan=2>aaaaaaaaaaaaaaaaaa</td></tr> <tr><td>aa</td><td>bb</td></tr> <tr><td colspan=2>aaaaaaaaaaaaaaaaaaaaaaaa</td></tr> </table> の３行目の（分割している）２つのセルの幅を自由に設定したいのですが、width=10%などといれてもうんともすんともしません。なにかいい方法ありますか？
- ベストアンサー
- HTML
- 【IE6】テーブルにcolspanが入ると幅指定がずれる？
閲覧いただきありがとうございます。 <Html>にて、<table>を入れているのですが <colspan>すると幅指定がずれてしまいます。 タグ記述のミスなのか、仕様なのかはっきりと分からない為 質問させていただきます。 下記のようなテーブルを作っています。 【テーブル】 テーブル幅 500px 2行 5列：（各列100pxの5等分） 【列内容】 1行目 ├5列全て colspan 2行目 ├1列目：100px ├2-3列目：100+100＝200px (colspan=2) ├4-5列目：100+100＝200px (colspan=2) ここで、2-3列目に幅200pxに指定した <select>タグを入れると、意図しない幅になってしまいます。 意図している動きは 2-3列目の幅ぴったりに<select>が入ってほしいのですが 4-5列目の4列部分がえぐれてしまい、4-5列目が200pxではなく 100pxぐらいの描画になってしまいます。 そして<select>タグは2-3列目にぴったりと入らず、 後ろに100pxの空きがでてしまいます。 http://kikky.net/pc/css_bug020.html このサイトではIE6ではcolspanがあると幅指定がずれると なっていますが、同一の現象なのでしょうか？ 示唆いただければ幸いです。 宜しくお願いします。 --------------記述html--------------- <html> <head> <title> ColSpanテスト </title> </head> <body> <table width="500" border="1" cellspacing="0" cellpadding="0" bordercolor="#000000" style="border-collapse: collapse;" > <colgroup> <col width="100" /> <col width="100" /> <col width="100" /> <col width="100" /> <col width="100" /> </colgroup> <!-- １行目 --> <tr> <td colspan="5"> span5 </td> </tr> <!-- ２行目 --> <tr> <!-- １列目 --> <td> </td> <!-- ２-３列目 --> <td nowrap colspan="2" > <select style="width:200px;" size="1" name="sl" id="sl"> <option value="99999">２列にしたい</option> </select> </td> <!-- ４-５列目 --> <td colspan="2" > 200pxなのに・・・ </td> </tr> </table> </body> </html>
- 締切済み
- HTML
- セルを結合してもCSSで設定した一つ分の幅で表示されます
tableタグを使用して表を作成しており、幅や罫線などの装飾はすべてCSSを使用しています。 質問は、WindowsのIEのみで発生する事象についてです。 colspanで結合しているthタグやtdタグがいくつかあるのですが、それらがCSSのwidthで設定した幅の一つ分で表示されてしまうのです。 FirefoxやSafari、Mac版IEでは発生しません。結合したセルの幅で表示されます（例：widthで100pxを設定し、colspan="3"なら、300pxで表示）。 これはWindows IEのバグでしょうか？ ネット上でかなり探してみましたが、情報は得られませんでした。 解決策・回避策をご存じの方、ご教示ください。
- 締切済み
- HTML
- Opera7.54のpadding、borderをwidthに含めてしまうバグについて
Internet ExplorerのCSS解釈において、widthやheightにpaddingとborderを加算してしまうことは有名ですが、Opera7.54（Windows版）でもDOCTYPEを宣言せずに、後方互換モード（クイックモード）で作動させた場合同様なことが起こるようなのです。 ところが『CSSバグ辞典スレッドの要約』等を見ても、この余りにも簡単に発見されると思われるOperaのボックスモデル上のバグに関して触れていません。 何らかの設定によって、後方互換モードにおけるOperaのwidth値のレンダリング内容を変えられるのでしょうか？
- ベストアンサー
- ブラウザ
- Firefox と IE での padding の認識の違いについて
CSS にて padding の記述をしているのですが、IE と Firefox で padding の認識の仕方が違い困っております。 例えば、幅100px の枠に左右の padding を 10px 指定した場合、幅100px の内に 10px の padding を取るのが IE であり、幅100px の外側に改めて padding 10px 取る（最終的に幅が120pxになる）のが Firefox であるようにです。 CSS例 #header { float: left; padding: 0 20; width: 100; height: 20; text-align: right; } このIE と Firefox の違いを解決する方法をご存知の方いらっしゃれば教えていただけないでしょうか？ よろしくお願いします。
- ベストアンサー
- HTML
- colspan を使用した際のIE7の動作
行き詰ってしまったのでこちらで質問させていただきます。 テーブルで表を作成しているのですが、 colspanで指定したセルの中にinputを入れると急にIE7でレイアウトが崩れます。 IEの他のverでは大丈夫なのですが、7だけくずれてしまうのは何か回避策があるのでしょうか？ ちなみに、下記のようなソースです。 全体で8列とり、１行目は項目３つに対してそれぞれinputを入れる列があり、 2行目は項目２つでinputを入れる列があります。 1行目は3等分にしたく、2行目は2等分にしたい形です。 何かほかに方法があるのでしょうか？ ご教授いただければと思います。 <style type="text/css"> .test{border-collapse:collapse;} .test td,.test th{border:solid 1px #000;} </style> <table width="952" border="1" cellspacing="0" cellpadding="0" class="test"> <tr> <th width="80">項目1</th> <td width="235"><input name="" type="text" value="12345" /></td> <th width="80">項目2</th> <td colspan="3"><input name="" type="text" value="12345" /></td> <th width="80">項目3</th> <td width="235"><input name="" type="text" value="12345" /></td> </tr> <tr> <th>項目4</th> <td colspan="3"><input name="input2" type="text" value="12345" /></td> <th width="80">項目5</th> <td colspan="3"><input name="input3" type="text" value="12345" /></td> </tr> </table>
- ベストアンサー
- HTML
- IE6.0のバグ
いつもお世話になっております。 IE6.0のブラウザでの表示についてお願いします。 htmlと外部cssでレイアウトしているのですが、 IE6.0の表示だけがずれてしまいます。 #hr { position: relative; width: 700px; height: 5px; background-color: #000000; margin: 3px 0px 0px 0px; border-style: none; padding: 0; } を指定してある<hr>がうまくいきません。 <hr>の上下に空白(幅)ができてしまいます。 いろいろ検索して対処法を考えたのですが、 どれもうまくいきませんでした。 どなたかわかる方、宜しくお願い致します。
- 締切済み
- HTML
- IE6/7でtable幅が効かない
こんにちわ。 クライアントのサイトを作成しており、 table部分のバグが発見されました。 画像の通りなのですが、それぞれの幅を同じにしたいのですが、 IE6/7だけ狭くなったり広くなったりしています。 IE6/7は無視してきたのですが、クライアントから指摘され困っています。 どなたかこの現象を修正する方法がありましたらご教示ください。 table { border-left:1px solid #C7C7C7; border-top:1px solid #C7C7C7; width:100%; } th { border-bottom:1px solid #C7C7C7; border-right:1px solid #C7C7C7; width:165px; table-layout:fixed; padding:8px 18px; background-color:#F2F2F2; font-weight:bold; } td { border-bottom:1px solid #C7C7C7; border-right:1px solid #C7C7C7; padding:8px 18px; } よろしくお願い致します。
- 締切済み
- CSS
補足
mezashi2000さん ご回答ありがとうございました。 <div>とマージンとの組み合わせとは、なかなかのアイデアですね。 参考になりました。 もう少しいろいろなアイデアを他の方からもお聞かせ願えると助かりますので、スレッドはこのままもう少しOpenにしておきます。 キャサリン