我想通过HTML table元素创建以下二叉树表示（下图是在图像编辑器中生成的，而不是实际的HTML）：
根据我之前使用colspan属性成功创建类似垂直树的经验，使用rowspan属性和以下代码似乎完全可以做到这一点：
<!DOCTYPE html>
<html>
<body>
<table border="1" cellpadding="0" cellspacing="0">
<tr>
<td rowspan="4">1</td>
<td rowspan="2">2</td>
<td rowspan="1">4</td>
</tr>
<tr>
<td rowspan="2">3</td>
<td rowspan="1">5</td>
</tr>
<tr>
<td rowspan="1">6</td>
</tr>
<tr>
<td rowspan="1">7</td>
</tr>
</table>
</body>
</html>然而，上面代码的结果并没有出现在我尝试过的每一个现代浏览器（Chrome，Safari，Firefox，Brave）的任何最新版本中：
我做错了什么吗？这在HTML表格中是可能的吗？看起来应该是，但是它不起作用...
备注：
- 如果可能的话，我非常想用HTML表格完成。
- 我实际上想将这个树扩展到更多的代（甚至可能达到10或12代左右），所以理想情况下任何解决方案都适合于此。
- 我已经试验过新的（-ish）“CSS Grid”features -- a nice tool，但是CSS Grid似乎不太适合将这样的树扩展到多代，因为似乎每个网格单元都需要显式的CSS
grid-row-start规范才能正确地将其放置在树中的适当行中（而不是像HTML表格那样只是浮动到下一个可用的自然位置）.如果我将这个树形图扩展到包含数百或数千个单元格的代则为每个小区声明显式的grid-row-start值似乎是不切实际的（或者至少是非常不期望的）。
1条答案
按热度按时间fykwrbwg1#
典型：公式化和重读问题让我意识到HTML代码中的错误。
下面的代码（略有改动）按预期/期望工作：