如何通过rowspan属性用HTML Table实现水平二叉树？

可以用HTML table实现，但单纯靠rowspan属性搞不定水平树的布局逻辑——这也是你试了多款浏览器都不符合预期的原因。水平二叉树的节点是横向排列，且需要和上下代节点通过连线关联，rowspan的纵向跨度逻辑和这种横向分层的布局天然冲突，浏览器的表格渲染引擎会优先保证单元格的完整性，自然会偏离你想要的效果。

要实现支持10-12代的水平二叉树，table方案需要换个思路：

• 按代拆分表格行：每一代节点对应一行，同时为每个节点预留足够的横向空间，让子节点能正好落在父节点的左右两侧。比如第N代的每个节点，需要占据2^(总代数 - N)个单元格的宽度，这样往下每一代的单元格数量都会翻倍，节点对齐逻辑能自然成立。
• 用单元格边框模拟连线：在节点行之间插入专门的行，通过设置特定单元格的边框（上、左、右）来绘制父节点到子节点的连线。
• 动态生成结构：10-12代的规模手动写HTML完全不现实，必须用JS动态计算每个节点的colspan值，循环生成对应的表格行和单元格。

举个3代水平二叉树的示例代码，你可以参考这个逻辑扩展到更多代：

<style>
  .tree-table { border-collapse: collapse; margin: 20px; }
  .tree-cell { 
    border: 1px solid transparent; 
    text-align: center; 
    padding: 8px;
    width: 40px;
    height: 40px;
  }
  .tree-node { 
    border: 1px solid #333; 
    border-radius: 50%; 
    background: #fff;
    display: inline-block;
    width: 30px;
    height: 30px;
    line-height: 30px;
  }
  .line-top { border-top: 1px solid #333; }
  .line-left { border-left: 1px solid #333; }
  .line-right { border-right: 1px solid #333; }
</style>

<table class="tree-table">
  <!-- 第1代节点行 -->
  <tr>
    <td class="tree-cell" colspan="4">
      <div class="tree-node">1</div>
    </td>
  </tr>
  <!-- 第1-2代连线行 -->
  <tr>
    <td class="tree-cell line-top line-right" colspan="2"></td>
    <td class="tree-cell line-top line-left" colspan="2"></td>
  </tr>
  <!-- 第2代节点行 -->
  <tr>
    <td class="tree-cell" colspan="2">
      <div class="tree-node">2</div>
    </td>
    <td class="tree-cell" colspan="2">
      <div class="tree-node">3</div>
    </td>
  </tr>
  <!-- 第2-3代连线行 -->
  <tr>
    <td class="tree-cell line-top line-right" colspan="1"></td>
    <td class="tree-cell line-top line-left" colspan="1"></td>
    <td class="tree-cell line-top line-right" colspan="1"></td>
    <td class="tree-cell line-top line-left" colspan="1"></td>
  </tr>
  <!-- 第3代节点行 -->
  <tr>
    <td class="tree-cell">
      <div class="tree-node">4</div>
    </td>
    <td class="tree-cell">
      <div class="tree-node">5</div>
    </td>
    <td class="tree-cell">
      <div class="tree-node">6</div>
    </td>
    <td class="tree-cell">
      <div class="tree-node">7</div>
    </td>
  </tr>
</table>

这个示例里，第1代节点的colspan是2^(3-1)=4，第2代是2^(3-2)=2，第3代是2^(3-3)=1，完全符合二叉树的节点分布逻辑。只要用JS写个循环，传入总代数值，就能自动计算每一代的colspan、生成节点行和连线行，轻松扩展到10-12代。

至于你提到的CSS Grid，确实纯手动写坐标不现实，但其实也可以用JS动态计算Grid位置，不过table方案的优势在于浏览器原生的表格布局会自动处理单元格对齐，不需要手动计算每个节点的精确行列坐标，对于大规模扩展来说更省心。

内容的提问来源于stack exchange，提问作者Todd Ditchendorf