- ベストアンサー
セルを結合すると他のセルの大きさがおかしくなる
いつもお世話になっています。 突然ですがお知恵をお貸し下さい。 □□ （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> というように記述しています。 申し訳ありませんが、解決方法をご教授頂ければ幸いです。よろしくお願い致します。
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
その他の回答 (1)
- think49
- ベストアンサー率59% (285/482)
> 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
お礼
どうもありがとうございました。 結局テーブルを入れ子にすることにしました。 教えて頂いたサイト、とっても参考になりました。
補足
回答ありがとうございます。 ご教唆頂いたサイトを参考に!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; }
お礼
回答どうもありがとうございます。 やっぱり１個のテーブルでやろうとするから面倒になるんですかね。 アドバイス通りにやってみようと思います。 どうもありがとうございます。