- ベストアンサー
IE7でcolspanを使用した際のレイアウト崩れの回避策は？
- テーブルで表を作成している際、colspanで指定したセルの中にinputを入れるとIE7でレイアウトが崩れます。IEの他のバージョンでは問題ありません。この問題を回避する方法はありますか？
- 質問者はテーブルで表を作成していますが、colspanで指定したセル内にinputを入れるとIE7でレイアウトが崩れる問題に遭遇しました。他のバージョンでは問題はありません。この問題を回避する方法があれば教えてください。
- テーブルで表を作成している際、colspanで指定したセル内にinputを入れるとIE7でレイアウトが崩れる現象に遭遇しました。他のバージョンでは問題ありません。この問題の回避方法を教えていただけないでしょうか？
- mayugen148
- お礼率42% (3/7)
- HTML
- 回答数2
- ありがとう数12
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
質問) DOCTYPEスイッチはどう書かれていますか？？ ＞1行目は3等分にしたく、2行目は2等分にしたい形です。 だと、2と3の公倍数のthとtdの倍、12等分して分けないと無理ですけど・・ ★Another HTML Lint - Gateway( http://www.htmllint.net/html-lint/htmllint.html ) のDATAで検証済みの、HTML4.01strict + CSS2.1 ★IE7は、input要素へのスタイルが効かないが配置は同じになるはず <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> ＿<meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> ＿<title>サンプル</title> ＿<meta name="author" content="ORUKA1951"> ＿<meta http-equiv="Content-Style-Type" content="text/css"> ＿<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" > ＿<link rel="START" href="../index.html"> ＿<style type="text/css"> <!-- html,body{margin:0;padding:0;} h1,h2,h3,h4,h5,h6{margin:0;line-height:1.6em;} p{text-indent:1em;} div.header,div.section,div.footer{width:90%;min-width:630px;max-width:900px;margin:0 auto;padding:5px;} table[summary="form"]{ border-collapse:collapse; line-height:2em; } table[summary="form"] tbody tr th,table[summary="form"] tbody tr td{ border:solid 1px; position:relative; } table[summary="form"] tbody tr td input[type="text"]{margin:0;border:none;width:99%;} table[summary="form"] tbody tr td input:focus{background-color:yellow;} --> ＿</style> </head> <body> ＿<div class="header"> ＿＿<h1>タイトル</h1> ＿＿<p>このページでは・・・・</p> ＿</div> ＿<div class="section"> ＿＿<h2>見出し</h2> ＿＿<p>本文はsection</p> ＿＿<table border="1" summary="form"> ＿＿＿<tbody> ＿＿＿＿<tr> ＿＿＿＿＿<th abbr="Item1" width="80">項目1</th> ＿＿＿＿＿<td width="235"><input name="item1" type="text" value="12345"></td> ＿＿＿＿＿<th abbr="Item2" width="80">項目2</th> ＿＿＿＿＿<td colspan="3"><input name="item2" type="text" value="12345"></td> ＿＿＿＿＿<th abbr="Item3" width="80">項目3</th> ＿＿＿＿＿<td width="235"><input name="item3" type="text" value="12345"></td> ＿＿＿＿</tr> ＿＿＿＿<tr> ＿＿＿＿＿<th abbr="Item4" width="80">項目4</th> ＿＿＿＿＿<td colspan="3"><input name="input2" type="text" value="12345"></td> ＿＿＿＿＿<th abbr="Item1" width="80">項目5</th> ＿＿＿＿＿<td colspan="3"><input name="input3" type="text" value="12345"></td> ＿＿＿＿</tr> ＿＿＿</tbody> ＿＿</table> ＿</div> ＿<div class="footer"> ＿＿<h2>文書情報</h2> ＿＿<dl class="documentHistry"> ＿＿＿<dt id="FIRST-PUBLISHED">First Published</dt> ＿＿＿<dd>2013-03-03</dd> ＿＿</dl> ＿</div> </body> </html> そんな無理なtabelではなくて、リストでマークアップしてスタイルシートで並べるほうが楽です。
その他の回答 (1)
- 神崎 渉瑠（@taloo）
- ベストアンサー率44% (1016/2280)
３等分と２等分の最小公倍数は６です。 ６列にすればcolspanを使わなくていいです。 <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 width="235"><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="2"><input name="input2" type="text" value="12345" /></td> <th width="80">項目5</th> <td colspan="2"><input name="input3" type="text" value="12345" /></td> </tr> </table>
お礼
taloo様、返信ありがとうございます！ 説明不足だったのですが、１行目の3分割は、ほぼ均等に3分割。 2行目の２分割はほぼ均等に2分割にしたいので、どこかの項目が大きく なったりしないような形にしたいと思っております。 上記ですと、項目５が２３５とられてしまうので大きくなってしまうようです。 私のわかりずらい説明で申し訳ありません。 色々とためしてみたいと思います。
お礼
ORUKA1951様、回答ありがとうございます。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> を使用しております。 ORUKA1951様のを試してみたいと思います。 ありがとうございます！