表の作成

質問

いつもお世話になっています。
下記の構文で表を作成した際に、セルの幅がずれてしまいます。

<TABLE border="1" cellspacing="0" width="940">
<TBODY>
<TR>
<TH height="17" width="790" colspan="5">A</TH>
<TH height="17" width="75" rowspan="2">G</TH>
<TH height="17" width="75" rowspan="2">H</TH>
</TR>
<TR>
<TH height="17" width="150">B</TH>
<TH height="17" width="80" >C</TH>
<TH height="17" width="220">D</TH>
<TH height="17" width="280">E</TH>
<TH height="17" width="60" >F</TH>
</TR>
</TBODY>
</TABLE>
<TABLE border="1" cellspacing="0" width="940">
<COLGROUP>
<col width="150">
<col width="80" >
<col width="220">
<col width="280">
<col width="60" >
<col width="75" >
<col width="75" >
</COLGROUP>
<TBODY>
<TR height="30">
<TD><FONT SIZE="-1">○</FONT></TD>
<TD><FONT SIZE="-1">×</FONT></TD>
<TD><FONT SIZE="-1">△</FONT></TD>
<TD><FONT SIZE="-1">□</FONT></TD>
<TD><FONT SIZE="-1">◆</FONT></TD>
<TD align="center">
<INPUT type="button" value="◎" style="width:55px;height:27px" onClick="">
<!-- ж -->
</TD>
<TD align="center">
<INPUT type="button" value="Δ" style="width:55px;height:27px" onClick="">
<!-- ☆ -->
</TD>
</TR>
</TBODY>
</TABLE>
どなたか解決方法を教えていただけないでしょうか？
よろしくお願いいたします。

回答No.2

quads · ベストアンサー

論理的には可能なのですが、フォントサイズやブラウザのレンダリング仕様（挙動）の偶発的な影響もあり、
別々のテーブルのセルをwidth属性やらプロパティで指定するだけでは、その幅を一致させることは容易ではありません。

されようとしていることは理解できるのですが。

っと、ブックマークを探したらありました。

「オレがルールだ！」：HTML TABLEタグでヘッダを固定にしてデータ部だけスクロール
http://blog.asura.co.jp/takehara/b1a6f562fa8d4dfca810348d2504a2cf/entry.aspx
「オレがルールだ！」：HTML TABLEタグでヘッダを固定にしてデータ部だけスクロール その２
http://blog.asura.co.jp/takehara/5219ac5dcee34422a506ab9f3df120df/entry.aspx

是非、参考ページの後半（その２）に示されている方法を理解し、応用して頂ければ幸いです。

回答No.1

key-child

表を分ける理由がわからない。

<table>
<thead>
<tr>
<th colspan="5">A</th>
<th rowspan="2">G</th>
<th rowspan="2">H</th>
</tr>
<tr>
<th>B</th>
<th>C</th>
<th>D</th>
<th>E</th>
<th>F</th>
</tr>
</thead>
<tbody>
<tr>
<td>○</td>
<td>×</td>
<td>△</td>
<td>□</td>
<td>◆</td>
<td><INPUT type="button" value="◎"></td>
<td><INPUT type="button" value="Δ"></td>
</tr>
</tbody>
</table>

後は自分で調整してください。

補足

回答ありがとうございます。
実は書き込み文字数制限の関係で記述を省いたのですが、
２つ目のTABLEは、
<DIV style="width : 10px; height : 400px; overflow-y:scroll;" >
という記述で囲み、スクロールさせるようにさせたいのです。
１つ目のテーブルはヘッダ部として出力し、
２つ目のテーブルは明細部といった感じを想定しています。
以上、よろしくお願いいたします。