Impedisci che la tabella si allunghi in HTML

Question

Ho le seguenti tabelle. Lo volevo così quando realizzo più tavoli da tavolo. Se non c'è più spazio nel tavolo, vai sotto gli altri e continua a allungare il tavolo.

<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

La tua domanda è difficile da leggere ma ci proverò.

Presumo che tu abbia una tabella principale che non vuoi essere superiore a 179 pixel. All'interno di questa tabella vengono posizionati riquadri che non devono rendere la tabella superiore a 179 pixel anche se sono presenti più di 4 riquadri. Per risolverlo avresti bisogno dello overflow dello stile: nascosto per evitare che il tavolo diventi troppo grande. Sfortunatamente questo non funziona per le celle della tabella, quindi dovresti aggiungere un elemento DIV con un overflow: stile nascosto nella cella della tabella.

La soluzione con un ulteriore elemento DIV all'interno della tabella è la seguente:

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

Naturalmente, come sottolinea Niteriter, sarebbe meglio usare i tag DIV per i layout. Nella tua situazione ciò comporterebbe anche un codice HTML / CSS molto più pulito.

<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

Dovresti usare gli stili CSS per i layout, non per le tabelle. Le tabelle servono per visualizzare righe di dati, non per compensare layout.

Considera questo:

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

Basta copiare questo codice nel file html e giocare con la finestra del browser per vedere come funziona.