Stopp-Tabelle aus gehen länger in HTML

Question

Ich habe die folgenden Tabellen. Ich wollte es so, wenn ich mehr Boxen Tisch machen. Wenn es auf dem in der Tabelle kein Platz mehr ist unter dem anderen gehen und die Tabelle lange machen zu halten.

<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

Ihre Frage ist schwer zu lesen, aber ich werde es versuchen.

Ich nehme an, Sie eine Haupttabelle haben, die Sie nicht wollen, als 179 Pixel höher. Innerhalb dieser Tabelle legen Sie Boxen, die die Tabelle nicht höher als 179 Pixel machen sollte, auch wenn es mehr als 4 Boxen. Um dies zu lösen müssen Sie den Stil overflow: hidden auf den Tisch, um zu verhindern wachsen zu groß. Leider ist dies nicht für Zellen Tabelle arbeiten, so dass Sie ein DIV-Element mit einem Überlauf hinzufügen müßten. Versteckt Stil in Ihrer Tabellenzelle

Die Lösung mit einem zusätzlichen DIV-Elemente in der Tabelle sieht wie folgt aus:

<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>

Natürlich, wie niteriter weist darauf hin, Sie wäre besser dran mit DIV-Tags für Layouts. In Ihrer Situation würde dies auch dazu führen, viel sauberer HTML / CSS-Code.

<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

Sie sollten CSS-Stile für Layouts, keine Tabellen verwenden. Die Tische sind für Datenzeilen angezeigt wird, nicht für für Layouts bilden.

Bedenken Sie:

<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> 

Sie einfach diesen Code kopieren Sie die Datei in HTML und mit Browser-Fenster spielen, um zu sehen, wie es funktioniert.