colspan を使用した際のIE7の動作

解決済

質問者：mayugen148
質問日時：2014/08/05 17:29
回答数：2件

行き詰ってしまったのでこちらで質問させていただきます。

テーブルで表を作成しているのですが、
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>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

No.1ベストアンサー

回答者： ORUKA1951
回答日時：2014/08/05 18:50

質問) 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">

＿</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ではなくて、リストでマークアップしてスタイルシートで並べるほうが楽です。

- 0
- 件

通報する

この回答へのお礼

ORUKA1951様、回答ありがとうございます。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitio …

を使用しております。
ORUKA1951様のを試してみたいと思います。
ありがとうございます！

通報する

お礼日時：2014/08/05 19:24

No.2

回答者： taloo
回答日時：2014/08/05 19:41

３等分と２等分の最小公倍数は６です。

６列にすれば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>

- 0
- 件

通報する

この回答へのお礼

taloo様、返信ありがとうございます！

説明不足だったのですが、１行目の3分割は、ほぼ均等に3分割。
2行目の２分割はほぼ均等に2分割にしたいので、どこかの項目が大きく
なったりしないような形にしたいと思っております。
上記ですと、項目５が２３５とられてしまうので大きくなってしまうようです。

私のわかりずらい説明で申し訳ありません。
色々とためしてみたいと思います。

通報する

お礼日時：2014/08/06 10:09

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！