display:flex布局容器内子元素table出现超大行间距问题

你之前试的那些调整table边距、单元格对齐的方案没用，是因为行间距过大的根源根本不在table自身样式上，是flex布局默认行为导致的：

• 你给外层容器设置了display: flex，flex容器默认的交叉轴对齐规则是align-items: stretch，会自动把所有直接子元素拉伸到和容器内最高子元素一致的高度
• 没有手动设置宽高的canvas元素默认尺寸为300px宽、150px高，是当前容器里最高的子项
• 右侧的table被拉伸规则强制拉到150px高，但table本身内容总高度远小于150px，默认布局逻辑下table会把多余的高度平均分配给每一行，最终就呈现出行之间超大空隙的效果
• 额外提一句：你贴的代码里tbody标签没有闭合，虽然浏览器会自动容错补全，还是建议补上避免出现意外渲染问题。

第一种方案就能解决绝大多数场景的需求：

• 给外层flex容器添加align-items: flex-start属性，让所有子元素保持自身内容高度、沿顶部对齐，不再自动拉伸，修改后的完整代码如下：

<html>
<body style="margin: 0px">
  <div style="display: flex; align-items: flex-start;">
    <canvas style="background-color: blue;"></canvas>
    <table>
      <tbody>
        <tr>
          <td>hi</td>
          <td>l</td>
        </tr>
        <tr>
          <td>lol</td>
        </tr>
      </tbody>
    </table>
  </div>
</body>
</html>

如果你确实需要table保持和canvas一样的高度，不想改对齐规则，可以给table加上固定高度分配规则，比如给table设置table-layout: fixed同时给tr设定固定高度，避免浏览器自动均分多余高度。

内容的提问来源于stack exchange，提问作者Luca Phillips