Evitar que la tabla se alargue en HTML

Question

Tengo las siguientes tablas. Lo quería así cuando hago más cajas de mesa. Si no hay más espacio en la mesa, vaya debajo de los otros y siga haciendo la mesa larga.

<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

Tu pregunta es difícil de leer pero la intentaré.

Supongo que tiene una tabla principal que no desea tener más de 179 píxeles. Dentro de esta tabla, usted coloca cuadros que no deberían hacer que la tabla tenga más de 179 píxeles, incluso si hay más de 4 cuadros. Para resolver esto, necesitaría el desbordamiento de estilo: oculto para evitar que la tabla crezca demasiado. Desafortunadamente, esto no funciona para las celdas de la tabla, por lo que deberá agregar un elemento DIV con un desbordamiento: estilo oculto dentro de la celda de la tabla.

La solución con un elemento DIV adicional dentro de la tabla tiene el siguiente aspecto:

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

Por supuesto, como niteriter señala que sería mejor usar etiquetas DIV para sus diseños. En su situación, esto también resultaría en un código HTML / CSS mucho más limpio.

<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

Debería usar estilos CSS para diseños, no tablas. Las tablas son para mostrar filas de datos, no para compensar los diseños.

Considera esto:

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

Simplemente copie este código al archivo html y juegue con la ventana del navegador para ver cómo funciona.