Игра со строками строк; как размещаются ячейки таблицы?

Question

Я пытаюсь создать квадратные скобки, используя таблицы, и я выполнил все вычисления для высоты интервала строк для всех элементов ячейки, но у меня возникают проблемы с тем, как он продолжает размещать ячейки в таблице с интервалами строк, определенными в предыдущемстрок.См. Этот пример:

<table border="1">
<tr>
<td style="min-width: 100px">Begin</td>
<td style="min-width: 10px"></td>
<td style="min-width: 10px"></td>
<td style="min-width: 100px">End</td>
</tr>
<tr>
<td colspan="4" style="height: 20px"></td>
</tr>
<tr>
<td rowspan="2">Seed 1</td>
<td rowspan="2"></td>
<td rowspan="5"></td>
<td rowspan="3"></td>
</tr>
<tr>
<td></td>
</tr>
</table>

Здесь текущие высоты для каждого столбца (исключая строки выше, потому что они уже четные) равны 2, 2, 5 и 3. Однако при добавлении другого элемента вСледующая строка просто для того, чтобы увидеть, где она находится в таблице, она отображается справа от существующей строки, создавая пятый столбец, который не должен существовать.Почему он не помещается в первый столбец, делая высоты столбцов 3, 2, 5 и 3?У меня сложилось впечатление, что таблица поместит элемент в следующую самую короткую колонку.Я полностью ушел со столов?Что я должен сделать, чтобы этот элемент действительно появился в первом столбце, где он должен быть?Нужно ли заполнять всю таблицу, чтобы она правильно отображалась (обычно таблицы просто оставляют пустое место, где ячейки не были размещены)?

Я искал в Google в течение часа и ничего не смог найтикасающийся того, как ячейки фактически должны быть размещены, когда HTML обрабатывается браузером.Есть слишком много другого мусора о том, как работают таблицы и яда яда я.

Answer 1

На самом деле, происходит то, что последняя ячейка пытается перейти в следующий ряд непосредственно ниже первого ряда. Однако следующий ряд уже заполнен, поскольку каждая ячейка имеет высоту не менее двух строк. Первая строка содержит [Seed 1] [] [] [], а вторая строка содержит нижнюю часть первых двух ячеек, а также середину третьей и четвертой ячейки из строки выше.

Если вы создадите пустую строку и перейдете к третьей строке ниже, вы увидите, что ячейки начинают появляться в таблице, как вы и ожидали:

<tr></tr>
<tr>
    <td>Row 3, Cell 1</td>
    <td>Row 3, Cell 2</td>
    <!-- no room left, now move to row 4 -->
</tr>

Ячейки не переходят автоматически из одного ряда в другой. Вы должны явно закрыть строку и начать следующую строку, когда каждая строка заполнена. В вашем случае вы полностью заполнили две полные строки одновременно, поэтому вам нужно пропустить строку, чтобы перейти к следующей строке с доступными ячейками.

Вот пример, который показывает, что клетки работают так, как вы ожидаете: http://jsfiddle.net/UmLqw/1/