いつもお世話になっています。
下記の構文で表を作成した際に、セルの幅がずれてしまいます。
<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ベストアンサー
- 回答日時:
論理的には可能なのですが、フォントサイズやブラウザのレンダリング仕様(挙動)の偶発的な影響もあり、
別々のテーブルのセルをwidth属性やらプロパティで指定するだけでは、その幅を一致させることは容易ではありません。
されようとしていることは理解できるのですが。
っと、ブックマークを探したらありました。
「オレがルールだ!」:HTML TABLEタグでヘッダを固定にしてデータ部だけスクロール
http://blog.asura.co.jp/takehara/b1a6f562fa8d4df …
「オレがルールだ!」:HTML TABLEタグでヘッダを固定にしてデータ部だけスクロール その2
http://blog.asura.co.jp/takehara/5219ac5dcee3442 …
是非、参考ページの後半(その2)に示されている方法を理解し、応用して頂ければ幸いです。
No.1
- 回答日時:
表を分ける理由がわからない。
<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>
後は自分で調整してください。
この回答への補足
回答ありがとうございます。
実は書き込み文字数制限の関係で記述を省いたのですが、
2つ目のTABLEは、
<DIV style="width : 10px; height : 400px; overflow-y:scroll;" >
という記述で囲み、スクロールさせるようにさせたいのです。
1つ目のテーブルはヘッダ部として出力し、
2つ目のテーブルは明細部といった感じを想定しています。
以上、よろしくお願いいたします。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- Visual Basic(VBA) Selenium.ChromeDriverの使い方について 7 2022/09/22 06:43
- HTML・CSS テーブルタグのセルの幅の一部だけを指定 1 2023/03/12 12:02
- JavaScript EasyUIのSubGrid(jquery)におけるObjectに入れた連想配列について 1 2022/05/02 11:21
- JavaScript vertical sliderをautoplayしたい 2 2022/08/25 14:47
- HTML・CSS 自身のHPにYouTube動画を貼り付けるのが出来なくなり困ってます 1 2022/11/11 10:44
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
- JavaScript jQueryで同じクラス名のものを別物として扱いたい 1 2022/06/17 14:14
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- その他(プログラミング・Web制作) ボールの動きがスムーズに動いてかつ目盛り線描画を維持するためには 4 2023/05/31 10:01
- PHP htmlで複数の個数入力欄を表示させるには 1 2022/09/20 03:11
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
tableタグとformタグの組み合わせ
-
html でのテキスト結合について
-
テーブルの一部分のセルだけに...
-
Tableタグ内のspan styleが適応...
-
同じクラス名はつけないほうが...
-
テーブル内のテーブルの高さを...
-
vbscriptで時計を作りたい
-
4カラムのテーブルに絶対幅と相...
-
cssで、テーブルのtdの中の文字...
-
td要素内のdiv要素をセンタリン...
-
前の質問のソースです
-
formのinputなどの幅100%指定
-
Tableタグで作成した表の縮小
-
テーブルの枠線に色が付かない
-
連続した空白を入れたい時は<pr...
-
divで囲んだ文字が消える
-
IEでテーブル内のテキストが...
-
Firefoxを使ってるのですがズー...
-
テーブルタグの中にdivを含めて...
-
TABLEのセルの中の文字を行単位...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
html でのテキスト結合について
-
tableタグとformタグの組み合わせ
-
特殊文字の検索方法
-
テーブルの一部分のセルだけに...
-
同じクラス名はつけないほうが...
-
Tableタグで作成した表の縮小
-
td要素内のdiv要素をセンタリン...
-
Tableタグ内のspan styleが適応...
-
テーブル内のテーブルの高さを...
-
formのinputなどの幅100%指定
-
divで囲んだ文字が消える
-
cssで、テーブルのtdの中の文字...
-
vbscriptで時計を作りたい
-
HTMLのテーブルでそれぞれの大...
-
td width="180" と固定してるの...
-
同じwidth=200でもセル内の文字...
-
ブラウザによってテーブルのセ...
-
TDタグ内での均等割付の仕方
-
表とリスト(ulとtable)の違い...
-
<img>タグにCSSのclass設定可能?
おすすめ情報