プロが教える店舗&オフィスのセキュリティ対策術

<table>で<td>の中に入れる文字の行が
多くなったり少なくなったりする形のもので
少ないときは高さを150pxに固定し、
多くなったときは行数に合わせて
自動的に高さが変化するものを作りたいです。
サンプルを作ってみました。
アドバイスをお願いいたします。

<html>
<head>
<title></title>
<body>
<table style="width:200px; height:150px; background-color:#ccc; vertical-

align:top; display:block; margin:20px;">
<tr>
<td>
<ul>
<li>あいうえお</li>
<li>あいうえお</li>
</ul>
</td>
</tr>
</table>

<table style="width:200px; height:150px; background-color:#ccc; vertical-

align:top; display:block; margin:20px;">
<tr>
<td>
<ul>
<li>あいうえお</li>
<li>あいうえお</li>
<li>あいうえお</li>
<li>あいうえお</li>
<li>あいうえお</li>
<li>あいうえお</li>
<li>あいうえお</li>
<li>あいうえお</li>
<li>あいうえお</li>
</ul>
</td>
</tr>
</table>
</body>
</html>

A 回答 (3件)

こんばんは。



TABLEのheight:150px;をやめる。
TDにstyle="min-height:150px;"
    • good
    • 6
この回答へのお礼

ありがとうございました。

お礼日時:2011/04/22 21:21

height:150px;


ではなく、
min-height:150px;

IE6も考慮するなら、
* html table{ height: auto !important; height: 150px;}
    • good
    • 1
この回答へのお礼

ありがとうございました。

お礼日時:2011/04/22 21:21

このソースに以下のソースを加えてみてください。



<style type="text/css">
ul{
margin-top:0px;
margin-bottom:0px;
}
</style>
    • good
    • 0
この回答へのお礼

ありがとうございました。

お礼日時:2011/04/22 21:22

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人はこんなQ&Aも見ています


このQ&Aを見た人がよく見るQ&A