Остановить таблицу больше в 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

Вы должны использовать стили 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-файл и поиграйтесь с окном браузера, чтобы увидеть, как он работает.

Answer 2

Ваш вопрос трудно прочитать, но я его попробую.

Я предполагаю, что у вас есть основная таблица, которую вы не хотите, чтобы она была выше 179 пикселей. Внутри этой таблицы вы размещаете блоки, которые не должны делать таблицу выше 179 пикселей, даже если их больше 4. Чтобы решить эту проблему, вам понадобится переполнение стиля: скрытый, чтобы предотвратить слишком большой рост таблицы. К сожалению, это не работает для ячеек таблицы, поэтому вам нужно добавить элемент 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>