IE7でcolspanを使用した際のレイアウト崩れの回避策は？
- テーブルで表を作成している際、colspanで指定したセルの中にinputを入れるとIE7でレイアウトが崩れます。IEの他のバージョンでは問題ありません。この問題を回避する方法はありますか？
- 質問者はテーブルで表を作成していますが、colspanで指定したセル内にinputを入れるとIE7でレイアウトが崩れる問題に遭遇しました。他のバージョンでは問題はありません。この問題を回避する方法があれば教えてください。
- テーブルで表を作成している際、colspanで指定したセル内にinputを入れるとIE7でレイアウトが崩れる現象に遭遇しました。他のバージョンでは問題ありません。この問題の回避方法を教えていただけないでしょうか？
- ベストアンサー
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>
- 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/2281)
３等分と２等分の最小公倍数は６です。 ６列にすれば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分割にしたいので、どこかの項目が大きく なったりしないような形にしたいと思っております。 上記ですと、項目５が２３５とられてしまうので大きくなってしまうようです。 私のわかりずらい説明で申し訳ありません。 色々とためしてみたいと思います。
関連するQ&A
- 【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
- 動的な表の計算
いつもお世話になります。 見よう見まねでやっている初心者です。 下記のような動的な表があります（PHPで表の行が可変します。） name="aa"に入力された値とname="bb"に入力された値の足し算の 回答をname="kaito"に出したいと思っています。 計算ボタンを押すとname="kaito"に答えを出したいのですが、 以下のような式ですと当然ながら全く反応しません。 javascriptまたはPHPをどう記述すれば表の値を計算できるようになるのでしょうか？ できれば具体的に教えて頂ければ大変助かります。 ご教授の程よろしくお願い致します。 <script> function keisan(){document.tasizan.kaito.value=(document.tasizan.aa.value)+(document.tasizan.bb.value)} </script> <form name="tasizan"> <table width="100" border="1"> <tr> <th width="10" scope="col">a</th> <th width="10" scope="col">b</th> <th width="20" scope="col">回答</th> </tr> <tr> <td><INPUT type="text" name="aa" ></td><td><INPUT type="text" name="bb" ></td><td><INPUT type="text" name="kaito" ></td> <td><input type="button" value="計算" onclick="keisan()"/></td> </tr> <tr> <td><INPUT type="text" name="aa" ></td><td><INPUT type="text" name="bb" ></td><td><INPUT type="text" name="kaito" ></td> <td><input type="button" value="計算" onclick="keisan()"/></td> </tr> <tr> <td><INPUT type="text" name="aa" ></td><td><INPUT type="text" name="bb" ></td><td><INPUT type="text" name="kaito" ></td> <td><input type="button" value="計算" onclick="keisan()"/></td> </tr> <tr> <td><INPUT type="text" name="aa" ></td><td><INPUT type="text" name="bb" ></td><td><INPUT type="text" name="kaito" ></td> <td><input type="button" value="計算" onclick="keisan()"/></td> </tr> </table> </form>
- ベストアンサー
- JavaScript
- 追加、削除について
以前、行の追加と削除で質問をした者です。 その時、innerHTMLでのやり方を教わりましたが appendChild、removeChildという、メソッドでも 同じことができるのか教えてもらいたいです。 追加ボタンを押すと左のNOが、3,4と下に増える 削除ボタンを押すと戻るというやり方です。 <sample.html> <html> <head> <META HTTP-EQUIV="Content-Type" CONTENT="text/html; CHARSET=Shift_JIS"> <title>列追加、削除</title> </head> <body> <table border=1> <col width="150" align="center" style="font-weight:bold"><col span="3"> <tr> <th >No</th> <th >列1</th> <th >列2</th> <th >列3</th> </tr> <tr> <td>1</td> <td><input type="text" name="sankou" value="" size="26" ></td> <td><input type="text" name="sankou" value="" size="26" ></td> <td><input type="text" name="sankou" value="" size="26" ></td> </tr> <tr> <td>2</td> <td><input type="text" name="sankou" value="" size="26" ></td> <td><input type="text" name="sankou" value="" size="26" ></td> <td><input type="text" name="sankou" value="" size="26" ></td> </tr> </table> <table> <tr> <td ><input type="button" VALUE="追加"></td > <td ><input type="button" VALUE="削除"></td > </tr> </table> </body> </html>
- ベストアンサー
- JavaScript
- htmlでインプットボックスを横並びに表示したい。
ホームページを作成しておりますが、tdの中にinput type="text"にてテキストボックスを4つ作成したいと考えております。 こちらで拝見いたしましたチェックボックスの右側に文字を表示される方法をご参考にさせていただき、下記を作成しましたが、縦並びになってしまいます。 何とかして縦2×横2に置き換えることはできないでしょうか？ ブラウザはIE11を使用しており、コードはVisualStudioCodeを使用しております。 <div style="top : 161px;left : 8px; position : absolute; z-index : 4; width : 847px; height : 252px; " id="Layer5"> <div style="background: white; padding: 10px; margin-bottom: 10px; border: 1px solid #333333"> <table border="1" height="252" width="818"> <tr bgcolor="gray" style="color:white" height="50"> <th height="42" width="92"><b>列1</b></th> <th height="42" width="212">列2・列3<br>列4・列5</th> <th height="42" width="137">列7/列8</th> <th height="42" width="189"><b>列9/列10</b></th> </tr> <tr bgcolor="lightyellow"> <td align="center" height="47" width="92"> <input type="text" name=列1 style="background:white; color:#000000;" align="middle" value="83行目"> </td> <td align="center" height="47" width="312"> <input type="text" name=列2 style="background:white; color:#000000;" align="middle" value="86行目"> <input type="text" name=列3 style="background:white; color:#000000;" align="middle" value="87行目"> <input type="text" name=列4 style="background:white; color:#000000;" align="middle" value="88行目"> <input type="text" name=列5 style="background:white; color:#000000;" align="middle" value="89行目"> </td> <td align="center" height="47" width="137"><input type="text" name=列7 style="background:white; color:#000000;" align="middle" value="92行目"> <span> <input type="text" name=列8 style="background:white; color:#000000;" align="middle" value="93行目"> </span> </td> </div> <td align="center" height="47" width="189"><input type="text" name=列9 style="background:white; color:#000000;" align="middle" value="96行目"> <input type="text" name=列0 style="background:white; color:#000000;" align="middle" value="97行目"> </td> </tr> <tr> <td align="center" height="47" width="92"></td> <td align="center" height="47" width="212"></td> <td align="center" height="47" width="137"></td> <td align="center" height="47" width="189"></td> </tr> </table> </div> </div> 【上記で表示させた場合】 ーーーーー｜ 86行目 ｜ーーーーー｜ ーーーーー｜ 87行目 ｜ーーーーー｜ 96行目 83行目 ｜ 88行目 ｜ 92行目｜ 97行目 ーーーーー｜ 89行目 ｜ーーーーー｜ 【やりたいこと】 ーーーーー｜ーーーーーーーーーー｜ーーーーー｜ ーーーーー｜ 86行目｜87行目 ｜ーーーーー｜ 96行目 83行目 ｜ 88行目｜89行目 ｜ 92行目 ｜ 97行目 ーーーーー｜ーーーーーーーーーー｜ーーーーー｜
- ベストアンサー
- JavaScript
- VBAでWebページに入力&ボタンクリック
URLがhttp://xxx.com/のページで次のようなフォームのときExcelで自動入力クリックするマクロを作りたいです。 <input type="hidden" name="room" value="aaaaa"/> <a name="regist" id="regist">総登録数</a> <table width="402" border="1"> <tr> <th align="center" colspan="2"><div align="left"><big>登録ページ</big></div></th> </tr> <tr> <td colspan="2"> name <input type="text" size="20" name="name" value="" maxlength="20"> Email <input type="text" size="20" name="email" value=""> </td> </tr> <tr> <td align="center">pass</td> <td><input type="text" size="20" name="pw" maxlength="12" value=""></td> </tr> <tr> <td align="center">category</td> <td><select size="1" name="junle"> <option value="pp" selected="selected">カテゴリ選択</option> <option value="0">その１</option> <option value="1">その２</option> </select></td> </tr> <tr> <td align="center">title</td> <td><input type="text" size="55" name="title" maxlength="25" value=""></td> </tr> <tr> <td align="center">URL</td> <td><input type="text" size="55" name="url"></td> </tr> <tr> <td align="center">intro</td> <td><input type="text" name="comment" size="55" maxlength="50" value=""></td> </tr> <tr align="center"> <td><br></td> <td><input type="submit" name="mode" value="登録"> <input type="reset" value="クリア"></td> </tr> </table> 入力する内容は１行目のA,B,C・・にname,email,pass・・・が順番にそれぞれ入っています。
- ベストアンサー
- オフィス系ソフト
- 複数のテーブルをFIELDSETで・・
<fieldset> <legend>住所・氏名を記入して下さい。</legend> <table border="1"> <tr> <th colspan=4>お申し込み者</th> </tr> <tr> <td>郵便番号</td> <td colspan=3><input type="text" name="郵便番号" size="10"></td> </tr> <tr> <td>ご住所</td> <td colspan=3><input type="text" name="住所" size="60"></td> </tr> <tr> <td>ふりがな<br> お名前</td> <td><input type="text" name="ふりがな" size="20"><br> <input type="text" name="氏名" size="20"> <td>電話番号</td> <td><input type="text" name="電話番号" size="16"></td> </tr> </table> <br><br> <table border="1"> <tr align="center"> <td colspan=4><b>お届け先</b>（お申し込み者と異なる場合のみご記入ください）</td> </tr> <tr> <td>郵便番号</td> <td colspan=3><input type="text" name="届け先郵便番号" size="10"></td> </tr> <tr> <td>ご住所</td> <td colspan=3><input type="text" name="届け先住所" size="60"></td> </tr> <tr> <td>ふりがな<br> お名前</td> <td><input type="text" name="届け先ふりがな" size="20"><br> <input type="text" name="届け先氏名" size="20"> <td>電話番号</td> <td><input type="text" name="届け先電話番号" size="16"></td> </tr> </table> </fieldset> 上のように縦に並んだ二つのテーブルをFIELDSETを使って囲んで、LEGENDで表題をつけようと思ったのですがうまくいきません。 どこがおかしいのでしょうか？初心者で参考書片手に作っているので、変なことを聞いていたらごめんなさい。
- ベストアンサー
- HTML
- 動的なtableの値を取得したい
いつもお世話になります。 見よう見まねでやっている超初心者です。 下記の様なテーブル（phpで読み込んでいますので実際は動的です。） の回答ボタンをクリックすると テーブル下の<INPUT type="text" name="kotae">に ボタンをクリックされた行のｂ列の値を入れたいと思っています。 function kaito()をどのように書いたら取得できるか悩んでいます。 初心者なもので具体的な回答でしたら助かります。 ご教授の程どうぞよろしくお願い致します。 <html> <head> <meta content="text/html; charset=utf-8" /> <script> </script> </head> <body> <table width="100" border="1"> <tr> <th width="30" scope="col">a</th> <th width="30" scope="col">b</th> <th width="40" scope="col">c</th> </tr> <tr> <td>1</td> <td>2</td> <td><input type="button" value="回答" onclick="kaito()"/></td> </tr> <tr> <td>5</td><td>3</td> <td><input type="button" value="回答" onclick="kaito()"/></td> </tr> <tr> <td>5</td> <td>4</td> <td><input type="button" value="回答" onclick="kaito()"/></td> </tr> <tr> <td>5</td> <td>5</td> <td><input type="button" value="回答" onclick="kaito()"/></td> </tr> </table> <INPUT type="text" name="kotae" size="12" > </body> </html>
- ベストアンサー
- JavaScript
- テーブルのテーブルの間に間ができるのでしょうか？
はじめまして、超html初心者のものです。 なぜ同じようテーブルを３つ書いているのに一番上のテーブルと真ん中のテーブルの間が開いてしまっているのかがわかりません。 あと、一番上のテーブルの-から先をもう少し左に寄せることもうまくいきません。 なにかアドバイスをよろしくお願いします。 ↓これがソースです。 <html> <head><title>test</title> </head> <form> <table border=1 cellspacing=0 cellpadding=2 width=760> <tr> <th width=95 height=30 align="right">日付け：</th> <td width=284> <input type="text"><input type="button"> </td> <td> - </td> <td><input type="text"><input type="button"></td> </tr> </table> <table border=1 cellspacing=0 cellpadding=2 width=760> <tr> <th width=95 height=30 align="right">部署：</th> <td width=100> <select name="busyo"></select> </td> <th width=80 align="right">営業所：</th> <td width=100> <select name="eigyousyo"></select> </td> <th width= 80 align="right">担当コード:</th> <td width=450> <select name="tantocode"></select> </td> </tr> </table> <table border=1cellspacing=0cellpadding=2width=760> <tr> <th width=80 align="right">権限:</th> <td width=700> <select name="kengen"></select> </td> </tr> </table> </form> </html>
- 締切済み
- 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
- 以下ソースのJavaScript部分をご教示下さい
<html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <script> </script> </head> <form action=""> <Table Border="1" Width="250"> <Tr> <Td ColSpan="4" Align="Center"> <B>依頼者</B> </Td> </Tr> <Tr> <Td Valign="top" Width="20%"> <input type="radio" name="irai" value="本人">本人 </Td> <Td Valign="top" Width="20%"> <input type="radio" name="irai" value="奥さま">奥様 </Td> <Td Valign="top" Width="20%"> <input type="radio" name="irai" value="お嬢さま">娘 </Td> <Td Valign="top" Width="20%"> <input type="radio" name="irai" value="ご子息さま">息子 </Td> </Tr> <Tr> <Td ColSpan="4"> <input type="radio" name="irai">その他 <input type="text" size="21" name="hoka"> </Td> </Tr> </Table> <Table Border="1" Width="250"> <Tr> <Td ColSpan="4" Align="Center"> <B>依頼者の連絡先</B> </Td> </Tr> <Tr> <Td Valign="top"> 番号：<input type="text" size="27" name="t"> </Td> </Table> <Table Border="1" Width="250"> <Tr> <Td Width="24%"> <center><input type="checkbox" name="1"> </Td><Td>日時確認</Td></Tr> </Table> <Table Border="1" Width="250"> <Tr> <Td Width="24%"> <center><input type="checkbox" name="2"> </Td><Td>依頼内容確認</Td></Tr> </Table> <textarea name="yoyaku" value="" rows="5" cols="28"> </textarea> <br> <button type="button" onclick="update(this.form);">内容反映</button> <input type="reset" value="リセット"> </form> </body> </html> 「内容反映」を押すと、テキストエリアに以下の様に吐き出され、 リセットで入力内容・テキストエリア共にリセットしたいです。 チェックボックスの２つについては、確認だけですので、 吐き出す必要はありません。 ◆反映内容◆ 依頼者：（irai選択内容が反映） 連絡先：（tに入力した内容が反映） 宜しくお願い致します。
- ベストアンサー
- JavaScript
お礼
ORUKA1951様、回答ありがとうございます。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> を使用しております。 ORUKA1951様のを試してみたいと思います。 ありがとうございます！