• ベストアンサー

セルを結合すると他のセルの大きさがおかしくなる

いつもお世話になっています。 突然ですがお知恵をお貸し下さい。 □□　　　　（A　B） □□　　　　（D　C） （左上から時計回りにA・B・C・Dとします） BとCのセルを連結しました。 Aのセルのサイズ（Height）を指定していたのですが、BCの文字数を増やすとサイズ指定が無効になってしまいます。 Cはサイズ（Height）指定していないのでいくらでも下に伸びても問題ないと思っていたのですが、Aが伸びてしまう状態です。 <table> <tr> <td>A</td> <td rowspan="2">BC</td> </tr> <tr> <td>D</td> </tr> </table> というように記述しています。 申し訳ありませんが、解決方法をご教授頂ければ幸いです。よろしくお願い致します。

  • HTML
  • 回答数2
  • ありがとう数3

質問者が選んだベストアンサー

  • ベストアンサー
回答No.2

＞　<tr> ＞　<td>A</td> ＞　<td rowspan="2">BC</td> ＞　</tr> こうなってしまうと、AのTDはheightを指定しても伸びてしまうので、 単純にテーブルを入れてしてしまった方が無難では、、、。 ///CSS <style type="text/css"> <!-- .A { padding: 8px; height: 100px; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #000000; vertical-align: middle; } .D { padding: 8px; } .AD{ border: 1px solid #000000; vertical-align: top; } .BC{ padding: 8px; border-top: 1px solid #000000; border-right: 1px solid #000000; border-bottom: 1px solid #000000; vertical-align: top; } --> </style> ///入れ子にしたテーブル <table cellpadding="0" cellspacing="0"> <tr> <td class="AD"> <table cellpadding="0" cellspacing="0"> <tr> <td class="A">A</td> </tr> <tr> <td class="D">D</td> </tr> </table> </td> <td class="BC"> BC<br> BC<br> BC<br> BC<br> BC<br> BC<br> </td> </tr> </table>

kaki1059
質問者

お礼

回答どうもありがとうございます。 やっぱり１個のテーブルでやろうとするから面倒になるんですかね。 アドバイス通りにやってみようと思います。 どうもありがとうございます。

その他の回答 (1)

  • think49
  • ベストアンサー率59% (285/482)
回答No.1

> Aのセルのサイズ(Height)を指定していたのですが、BCの文字数を増やすとサイズ指定が無効になってしまいます。 実験してみましたが、再現できません。 --- <style type="text/css"> html,body{ margin: 0px; padding: 0px; } table#test{ border-collapse: separate; border-spacing: 2px; } table#test td{ border: solid black 1px; } #A{ height: 2em; } </style> <body> <table id="test"> <tr> <td id="A">A</td> <td id="BC" rowspan="2">BC<br><br><br><br><br>[EOF]</td> </tr> <tr> <td id="D">D</td> </tr> </table> --- > Cはサイズ(Height)指定していないのでいくらでも下に伸びても問題ないと思っていたのですが、Aが伸びてしまう状態です #A{ height: 2em; } より高い優先度のスタイルがあるのかもしれません。 !important を付けてみたら、どうなるでしょうか？ CSS解説 -カスケード (The cascade)- http://park19.wakwak.com/~zashiki/css-make/cascade.html

kaki1059
質問者

お礼

どうもありがとうございました。 結局テーブルを入れ子にすることにしました。 教えて頂いたサイト、とっても参考になりました。

kaki1059
質問者

補足

回答ありがとうございます。 ご教唆頂いたサイトを参考に!important指定をしてみたのですが、上手くいきませんでした。 CSSは以下のように設定しています。 外部ファイルを呼び出し、HTMLファイル内では一切スタイルシートを指定しないようにしています。 /* A */ td.a{ border : 1px #000000 solid; text-align : center; vertical-align : middle; width : 300px; height : 180px; background-image : url(img/top.jpg); background-position : left top; } /* BC */ td.bc { border : 1px #000000 solid; width : 700px; vertical-align:top; padding : 20px; } /* D */ td.d { border : 1px #000000 solid; width : 300px; }

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. HTML

関連するQ&A

  • セルの高さを固定するには？

    2列2行のテーブルを作り、右の列をrowspan=2で結合しています。 右の列はテキストや画像を追加入力していくので、縦が長くなっていきます。 その際、左上のセルだけ高さを固定し、左下のセルは自動で高さが決まるようにしたいと思っています。 が、左上のセルにheight=150と入力しても、右が伸びるにつれて長くなってしまいます。 CSSで指定しても同じです。 rowspanを使うと、結合していないセルの高さを固定することはできないのでしょうか。 良い解決策がありましたら、お知恵をお貸し下さい。 <table> <tr> <td>ここを固定したいです</td> <td rowspan="2">ここが長くなっていきます</td> </tr> <tr> <td>ここは右が長くなるにつれて自動で伸びるようにしたいです</td> </tr> </table>

    • ベストアンサー
    • HTML
  • テーブルのセルの高さ

    テーブルのセルの高さを設定するには、HEIGHT=で設定すればいいと思うのですが、 たとえば、わかりやすい例でいうと、 <HTML> <BODY> <TABLE BORDER=1> <TR><TD VALIGN="top">セルＡ</TD> <TD VALIGN="top" ROWSPAN="2"> <TABLE BORDER=1> <TR><TD>セルＢ－１</TD><TD>セルＢ－２</TD></TR> <TR><TD>セルＢ－３</TD><TD>セルＢ－４</TD></TR> <TR><TD>セルＢ－５</TD><TD>セルＢ－６</TD></TR> <TR><TD>セルＢ－７</TD><TD>セルＢ－８</TD></TR> <TR><TD>セルＢ－９</TD><TD>セルＢ－10</TD></TR> <TR><TD>セルＢ－11</TD><TD>セルＢ－12</TD></TR> <TR><TD>セルＢ－13</TD><TD>セルＢ－14</TD></TR> </TABLE> </TD></TR> <TD VALIGN="top">セルＣ</TD></TR> </TABLE> </BODY> </HTML> というテーブルの場合、セルＡとセルＣの境界はセルＢの高さの真中くらいに なると思います。 それで、セルＡとセルＣの内容は固定なのですが、セルＢ内のテーブルはcgiからの 書き出しで可変長です。 実現したいことは、セルＢの大きさにかかわらず、セルＡの高さを固定したいのです。 セルＣはセルＢの高さと連動して可変するようにテーブルを組みたいのですが、 どのように指定すれば実現できるでしょうか？ セルＡにHEIGHT指定してもなぜか、無視（？）されてしまいます・・・ よろしくお願いします。

  • tableのセル高さの固定法

    下記のようなTABLEがあるとします． 右の列は縦３行を連結した１つのセルになっています． また左上の「１」のセルの高さは，50PIXとなっています． いま，右列セルの内容が増えて，table全体の高さが増した場合， 「１」セルはその高さ指定50PIXを無視して拡がってしまいます． このような状況を回避して，右列セルの高さがどうあろうとも 「１」セルの高さを固定する方法を教えて下さい． （例えば，右列セルが高くなった場合， 　「１」セルと固定する代わりに「３」セルを拡げて全体の高さを確保する，など） <TABLE border="1"> <TBODY> <TR> <TD HEIGHT="50PIX">１</TD> <TD ROWSPAN=5> ●あ<br> ●あ<br> ●あ </TD> </TR> <TR> <TD>２</TD> </TR> <TR> <TD>３</TD> </TR> </TBODY> </TABLE>

  • セルの高さを固定したい

    こちらの質問と同じです。 http://oshiete1.goo.ne.jp/qa4888659.html IEにおいて、隣に結合したセルがあり、中央の高さを固定したいという状態です。 条件として、”基本HTMLは変更しない”が重要です。 テーブルの変わりにdivにする、などは求めていません。 ■HTML <table> <tr> <td>&nbsp;</td> <td rowspan="3">結合セル</td> </tr> <tr> <td>高さを固定</td> </tr> <tr> <td>&nbsp;</td> </tr> </table> HTMLで高さを指定しても、CSSでheightやmax-heightで指定しても伸びてしまいます。 何か方法はあるでしょうか？

    • ベストアンサー
    • HTML
  • EXCELのセル内にHTMLタグを含む文を入力

    エディタ上の文章 abc<table border=1><tr><td>A</td><td>B</td></tr><tr><td>C</td><td>D</td></tr></table> の文章をcopyして、適当なセルにpasteすると、この文章のままではなくて、A、B、C、Dが違う セルに入ってしまいます。 <とtabelの間に半角をいれて abc< table border=1><tr><td>A</td><td>B</td></tr><tr><td>C</td><td>D</td></tr></table> をcopyして、セルに入力すると、そのセル内には入りますが、abc< table border=1>ABCD とタグが無視された形で入力されてしまいます。 今まではこんな事はなかったのですが、HTMLタグが消えないようにする事はできないでしょうか？

  • tableセルに色を付ける

    　tableセルに色を付けます。 　で、行で指定しようとtrタグにbgcolorをいれました。 　ネスケでは問題ないのですが、ie6だとテーブルの外にも色がついてしまい変です。 　セルを結合させたりしたりしてることが影響あるのでしょうか？ieのバグですかね？ 　コレを解決するには、trで色を付けるのを諦めて、セルごと（tdやth）に指定していくしかないのでしょうか。 　スタイルシートは使わない前提です。htmlだけでの解決があったら教えてください。 <html> <head> </head> <body> <table border="10" align="center"> <tr> <th colspan="2">タイトル</th> </tr> <tr> <td height="70" rowspan="2" align="center" valign="top">１</td> 　<td>あ</td> </tr> <tr> 　<td>い</td> </tr> <tr bgcolor="red"> 　<td>２</td> 　<td>う</td> </tr> </table> </body> </html>

    • ベストアンサー
    • HTML
  • 次のテーブルのセル内文字を小さく

    したいのですがセル内文字ごとに<h7></h7>を付けると文字は小さくなるもののセルの高さがむしろ高くなり文字が上に貼りついてしまいます セルの高さも同じように文字にあわせて小さくできるような設定はあるでしょうか? <table border=1 cellspacing=0 cellpadding=0> <caption align=left> <nobr>あいうえおかきくけこ<nobr/> </caption> <tr><td colspan=3>abc</td></tr> <tr><td>A</td><td>B</td><td>C</td></tr> <tr><td>A</td><td>B</td><td>C</td></tr> <tr><td>A</td><td>B</td><td>C</td></tr> <tr><td colspan=3 height=15></td></tr> </table>

    • ベストアンサー
    • HTML
  • Safariでテーブルのセルの高さを均等にしたい

    Safariです（ちなみに見ているバージョンは４） <table> <tr> <td></td> <td rowspan="2"></td> </tr> <tr> <td></td> </tr> </table> このような、片方が結合しているテーブルで、 隣のセルの高さを均等にしたいのです。 ほかのブラウザでは良いのですが、 Safariだとどうしても上が短く、下が長くなってしまいます… CSS等で均等にできないでしょうか？？ 試しにheight:50%;にしましたがなりませんでした。

    • ベストアンサー
    • HTML
  • IE セル間に隙間が・・・

    HTML初心者です。 テーブルでHPをレイアウトしたいのですが、--1と--3のセル間に微妙な隙間ができてしまいます。NNでは問題なく表示されます。通常どの様なことが原因するのでしょうか？よろしくお願いいたします。 <td width="396" height="234"valign="top"><table width="100%" height="234" border="0" cellpadding="0" cellspacing="0"> <tr> <td width="180" rowspan="2" valign="bottom" >1 <img src="../image/***" width="180" height="180" align="bottom"></td> ------1 <td width="216" height="98" valign="bottom">***</td> </tr> <tr> <td height="136" valign="bottom" ><img src="../image/*** width="91" height="61" border="1"><br>></td> </tr> </table></td> <td width="10" rowspan="3" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0"> <tr> <td height="262"></td>　　　　　　　　------３ <td valign="top" >*** <br> </td>

    • ベストアンサー
    • HTML
  • htmlを使って表を作っています

    自分でつくった表だとどうしてかうまくいきません。何がいけないのでしょうか？わからないところをまた自分で見つけて修正するのでポイントとソースを書いていただけませんか？ 練習問題と自分が作ったソース載せます。 <html> <h4><b>１問<b></h4> <table border="1"width="400"height="400"> <tr><td background="1_4.jpg"width="200">1_4.jpg</td><td></td></tr> </table> <table border="1"width="400"height="400"> <tr><td>aaaa</td><td>aaaa</td></tr> </table> <h4><b>2問<b></h4> <table border="1"width="50"height="50"> <tr bgcolor="#ff0000"><td></tr></td> </table> <h4><b>3問<b></h4> <table border="1"width="150"height="100"> <tr bgcolor="#0000ff"><td></td><td></td><td></td></tr></table> <table border="1"width="150"height="100"> <tr colspan="3"><td></tr> <tr><td width="50"></td></tr> <tr><td width="50"></td></tr> <tr><td width="50"></td> </tr> </table> <h4><b>4問<b></h4> <table border="1"width="100"height="100"> <tr><td bgcolor="#00ff00"></td><td></td></tr></table> <table border="1"width="100"height="100"> <tr><td></td><td></td></tr></table> </html> 課題1_7-2 覚えるタグ ・<td background="★">～</td> ★には画像ファイル名(URL)を入れます。 <td>タグのbackground属性でセルの背景に画像を 貼り込むことができます。 画像の大きさがセルよりも小さい場合は繰り返して タイル状に並べられます。 それでは早速つくってみましょう。 ＜第一問：幅400、高さ400、上のセルの数が２つ、下のセルの数が２つの テーブルを作り、左上のセルに1_4.jpgを背景に貼り込んでみましょう。＞ どうですか？うまく表示されましたか？ レイアウトをしていく上で大切なタグになっていくので頑張って作ってみましょう。 背景に指定できるのは画像だけではありません。 文字のように、色を指定することもできます。 覚えるタグ ・<table bgcolor="★">～</table> ・<tr bgcolor="★">～</tr> ・<td bgcolor="★">～</td> ★には色指定値(例：#ff0000)が入ります。 bgcolor属性でテーブルの背景色を設定します。 <table>タグに指定した場合はそのテーブル全体に、 <tr>タグに指定した場合はその横一列（一行）に色がつきます。 <td>タグに指定した場合はそのセルにのみ色がつきます。 それでは実際に作ってみましょう。 ＜第二問：幅50、高さ50、１つのセルのテーブル全体の背景を赤くしてみましょう。 　　　　　赤→#ff0000＞ ＜第三問：幅150、高さ100、上のセルを３つ、下のセルを３つのテーブルを作り、 　　　　　上３つのセルの背景を青くしてみましょう。 　　　　　青→#0000ff＞ ＜第四問：幅100、高さ100、上のセルを２つ、下のセルを２つのテーブルを作り、 　　　　　左上のセルの背景を緑にしてみましょう。 　　　　　緑→自分で見つけて下さい＞

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する