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

Твой вопрос трудно прочитать, но я попробую.

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

Answer 2

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