HTMLでストップテーブルが長くならない

Question

次の表があります。私はそれをもっとたくさんのテーブルを作るときに望みました。テーブルの上に余分なスペースがない場合は、他のものの下に行き、テーブルを長くし続ける。

<table width="417" border="1" cellspacing="0" cellpadding="0"> 
    <tr> 
    <td width="413" height="179"> 
     <table width="141" border="1" align="left" cellpadding="0" cellspacing="0"> 
     <tr> 
      <td width="137" height="89">Box1</td> 
     </tr> 
     </table> 
     <table width="141" border="1" align="left" cellpadding="0" cellspacing="0"> 
     <tr> 
      <td width="137" height="89">Box2</td> 
     </tr> 
     </table> 
    </td> 
    </tr> 
</table> 

Answer 1

あなたの質問は読みにくいですが、私はそれに行きます。

メインテーブルが179ピクセルを超えないようにしたいとします。このテーブルの中に4つ以上のボックスがあっても、テーブルを179ピクセル以上にしてはならないボックスを配置します。これを解決するには、スタイルがオーバーフローする必要があります。テーブルが大きくなり過ぎないようにするには、非表示にします。残念ながら、これは表のセルでは機能しません。したがって、表のセル内にオーバーフロー：非表示のスタイルのDIV要素を追加する必要があります。もちろん

<table width="417" border="1" cellspacing="0" cellpadding="0"> 
    <tr> 
    <td width="413" height="179"> 
     <div style="height: 179px; overflow: hidden;" > 
     <table width="141" border="1" align="left" cellpadding="0" cellspacing="0"> 
      <tr> 
      <td width="137" height="89">Box1</td> 
      </tr> 
     </table> 
     <table width="141" border="1" align="left" cellpadding="0" cellspacing="0"> 
      <tr> 
      <td width="137" height="89">Box2</td> 
      </tr> 
     </table> 
     </div> 
    </td> 
    </tr> 
</table> 

、niteriterが指摘するように、あなたのレイアウトにDIVタグを使用したほうが良いでしょう：次のように

テーブル内の余分なDIV要素を備えたソリューションが見えます。あなたの状況では、これはまた、よりクリーンなHTML/CSSコードになります。

<style> 
div.wrapper { height: 179px; width: 413px; overflow: hidden; } 
div.box { float: left; height: 89px; width: 137px; } 
</style> 
<div class="wrapper" > 
    <div class="box" > Box1 </div> 
    <div class="box" > Box2 </div> 
    <div class="box" > Box3 </div> 
</div> 

Answer 2

レイアウトではなく表にCSSスタイルを使用する必要があります。表はデータの行を表示するためのものであり、レイアウトを補うためのものではありません。

<style type="text/css"> 

    .wrapper 
    { 
     padding:10px; 
     overflow:auto; 
     background-color:#888; 
    } 

    #box 
    { 
     float:left; 
     width:150px; 
     padding:10px; 
     background-color:#aaa; 
    } 

</style> 

<div class="wrapper"> 

    <div id="box">Box 1</div> 

    <div id="box">Box 2</div> 

    <div id="box">Box 3</div> 

    <div style="clear:both;"></div> 

</div> 

だけでファイルをHTMLとそれがどのように動作するか確認するために、ブラウザのウィンドウで再生するには、このコードをコピー：

が、この考えてみましょう。