玩行跨度；表格单元格如何放置？

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 时单元格实际应该如何放置有关的任何内容。关于桌子如何工作和 yada yada ya 的其他垃圾太多了。

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/