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ピクセルより高くしないようにボックスを配置します。これを解決するには、テーブルが大きくなりすぎるのを防ぐために隠されたスタイルオーバーフローが必要です。残念ながら、これはテーブルセルでは機能しないため、テーブルセル内にoverflow：hiddenスタイルのDIV要素を追加する必要があります。

表内に追加の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>

もちろん、編集者が指摘しているように、レイアウトに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ファイルにコピーし、ブラウザのウィンドウを再生して、動作を確認してください。