- ベストアンサー
セルの高さを固定するには？
2列2行のテーブルを作り、右の列をrowspan=2で結合しています。 右の列はテキストや画像を追加入力していくので、縦が長くなっていきます。 その際、左上のセルだけ高さを固定し、左下のセルは自動で高さが決まるようにしたいと思っています。 が、左上のセルにheight=150と入力しても、右が伸びるにつれて長くなってしまいます。 CSSで指定しても同じです。 rowspanを使うと、結合していないセルの高さを固定することはできないのでしょうか。 良い解決策がありましたら、お知恵をお貸し下さい。 <table> <tr> <td>ここを固定したいです</td> <td rowspan="2">ここが長くなっていきます</td> </tr> <tr> <td>ここは右が長くなるにつれて自動で伸びるようにしたいです</td> </tr> </table>
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
#1 さんの様にするのが現実的だけど、テーブルを利用するなら左のtdを例の様にどうにかする。 <table> <tr> <td style="vertical-align: top;"> <div style="height: 150px;">ここを固定したいです</div> ここは右が長くなるにつれて自動で伸びるようにしたいです。 </td> <td>ここが長くなっていきます</td> </tr> </table>
その他の回答 (1)
- hukazuo
- ベストアンサー率32% (36/111)
tableではなくdivでそれっぽくしてみました。 <html> <head> <title></title> </head> <body> <div style="width:500px; border:solid 1px #000000;"> <div style="float:left; width:200px; height:auto;"> <div style="border-bottom:solid 1px #000000; height:10px;"> ここを固定 </div> <div style="height:auto;"> 右がながくなるにつれて自動で伸びる。 </div> </div> <div style="float:left; height:auto; width:auto; border-left:solid 1px #000000;"> ここが長くなる。 </div> <div style="clear:both;"></div> </div> </body> </html> いかがでしょうか。。。。
お礼
どうにも上手くいかないので、左の列を1行に結合し、小テーブルの余白や上下の区切りを画像で代用してそれっぽく仕上げました。 IEでは問題なく見えますけど、他のブラウザで見たときにずれてないか不安ですが……。 ご回答ありがとうございました！m(_"_)m
補足
早速のご回答ありがとうございます。 既に公開しているページで、かなりごちゃごちゃと書き込んでしまっていますので、再度構築するのは非常に困難な状況です。 テーブルを使いつつ、左上のセルだけheightを固定する方法はございませんでしょうか？
お礼
どうにも上手くいかないので、左の列を1行に結合し、小テーブルの余白や上下の区切りを画像で代用してそれっぽく仕上げました。 IEでは問題なく見えますけど、他のブラウザで見たときにずれてないか不安ですが……。 ご回答ありがとうございました！m(_"_)m
補足
早速のご回答ありがとうございます。 質問のソースはわかり易いように簡略化しましたが、実際は ・大テーブルが2列2行(cellspacing=20) ・各セルに小テーブルを入れ子(cellpadding=6) ・大テーブルと小テーブルの背景色が異なる という状態になっています。 naokita様の方法だと、左のセルが繋がるので、元の左上と左下の間に大テーブルの背景色が入らなくなってしまいます。 縦20pxの同色の画像を置いても、今度はcellpadding=6が邪魔して、小テーブルの枠だけが上下繋がってしまいます。 頼りっ放しで恐縮ですが、今一度お知恵をお貸し頂けませんでしょうか。