如何实现带rowspan=2的1:1比例双列HTML表格？

问题根源 #

给<td>设置display: inline-block会破坏表格的原生布局机制，导致rowspan属性失效——表格的合并行/列特性依赖于表格自身的布局上下文，修改单元格的display属性后，这些特性会完全失效。

方案一：纯表格原生写法（推荐保留表格语义） #

去掉display: inline-block，依靠表格原生布局实现需求：

<table class="table" style="width: 100%; border-collapse: collapse;">
  <tbody>
    <tr>
      <td rowspan="2" style="width: 50%; aspect-ratio: 1/2; background: #eee;">
      </td>
      <td style="width: 50%; aspect-ratio: 1/1; background: #ccc;">
      </td>
    </tr>
    <tr>
      <td style="width: 50%; aspect-ratio: 1/1; background: #ddd;">
      </td>
    </tr>
  </tbody>
</table>

• 移除所有display: inline-block样式，让表格单元格回到原生布局流
• 添加border-collapse: collapse消除表格默认的单元格间距
• width: 50%和aspect-ratio可以直接生效，rowspan="2"会正常让左侧单元格占据两行高度

方案二：Flexbox替代布局（更灵活的现代方案） #

如果不需要表格语义，用Flexbox可以更轻松实现相同布局：

<div style="display: flex; width: 100%;">
  <!-- 左侧竖向单元格 -->
  <div style="width: 50%; aspect-ratio: 1/2; background: #eee;">
  </div>
  <!-- 右侧上下两个单元格容器 -->
  <div style="width: 50%; display: flex; flex-direction: column;">
    <div style="aspect-ratio: 1/1; background: #ccc;">
    </div>
    <div style="aspect-ratio: 1/1; background: #ddd;">
    </div>
  </div>
</div>

• 外层flex容器平分左右宽度
• 右侧用垂直方向的flex容器，内部两个元素依靠aspect-ratio:1/1自动保持正方形，高度之和刚好匹配左侧元素的高度

内容的提问来源于stack exchange，提问作者Youssef Ghrib