Блог

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

 <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 обрабатывается браузером. Слишком много другого мусора о том, как работают таблицы, и да-да-да.

На самом деле, происходит то, что последняя ячейка пытается перейти в следующую строку сразу под первой строкой. Однако следующая строка уже заполнена, потому что каждая ячейка имеет высоту не менее двух строк. Первая строка содержит [начальное значение 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 /