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

实际上，正在发生的事情是最后一个单元格试图进入第一行正下方的下一行。但是，下一行已经满了，因为每个单元格至少有两行高。第一行包含[种子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/

玩rowpans;如何放置表格单元格？

1 个答案: