mesa impedir de ir mais em HTML

Question

Eu tenho as seguintes tabelas. Eu queria que então quando eu fazer a tabela mais caixas. Se não houver mais espaço no em movimento tabela abaixo os outros e continuar a fazer a longa mesa.

<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

A sua pergunta é difícil de ler, mas vou dar-lhe um ir.

Eu presumo que você tem uma tabela principal que você não quer ser maior do que 179 pixels. Dentro dessa tabela, você colocar caixas que não deve chegar à mesa maior do que 179 pixels, mesmo se houver mais de 4 caixas. Para resolver isso, você precisaria o transbordamento estilo: escondido para parar a mesa de crescer muito grande. Infelizmente, isso não funciona para as células da tabela assim que você precisa para adicionar um elemento DIV com um overflow:. Escondida estilo dentro de sua célula da tabela

A solução com um elemento DIV extra dentro da aparência da tabela da seguinte forma:

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

Claro que, como pontos niteriter fora você seria melhor fora de usar tags DIV para seus layouts. Em sua situação esta também resultaria em muito código HTML mais limpo / 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

Você deve usar estilos CSS para layouts, não tabelas. As tabelas são para a exibição de linhas de dados, não para fazer-se de layouts.

Considere o seguinte:

<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 copiar este código ao arquivo html e jogar com a janela do navegador para ver como ele funciona.