设置display:flex的表格单元格忽略rowspan属性是否为预期行为？

这确实是预期行为，核心原因在于CSS布局模式的冲突：

• 表格单元格（<td>）天生属于表格布局上下文，rowspan这类HTML表格原生属性，只有当单元格遵循表格布局的默认渲染规则时才能正常工作。
• 一旦给<td>设置了display: flex，这个单元格就彻底脱离了表格布局体系，变成了一个flex容器。此时浏览器会完全按照flex布局的规则来渲染它，表格相关的所有属性（包括rowspan）都会被忽略——毕竟flex布局和表格布局是两种互斥的渲染模式，没法同时作用在同一个元素上。

满足需求的解决方案 #

如果你想保留rowspan的效果，同时让第一个单元格内的div占满全部垂直空间，可以换个思路：

• 不要直接给<td>加display: flex，而是在<td>内部嵌套一个容器div，把flex布局应用到这个内部容器上，同时让它占满单元格的高度：

  .inner-flex-container {
    display: flex;
    height: 100%; /* 让flex容器撑满单元格的全部垂直空间 */
    /* 按需添加flex-direction等其他属性 */
  }
  

• 这样<td>依然保持表格布局的特性，rowspan能正常生效，内部的flex容器又能实现你需要的空间占满效果。

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