使用display:table系列属性时，table-cell非table-row直接子元素能否实现表格布局？

问题1：table-cell并非table-row直接子元素时，能否用table相关display属性创建表格布局？ #

不行。CSS表格布局的规则明确要求：table-row的直接子元素必须是table-cell（或table-caption、table-header-group等表格专用元素）。如果中间嵌套了普通块级元素（比如示例里的nestedDiv），浏览器会自动生成匿名表格元素修正结构，导致原本的table-cell无法被正确识别为对应table-row的单元格，最终布局失效。

问题2：不修改HTML结构的前提下，能否实现示例中的表格布局？ #

可以，有两种可行的CSS调整方案：

方案1：给嵌套div设置table-row属性 #

让中间的nestedDiv承担table-row的角色，替代原本row类元素对内部col的容器作用：

section {
  display: table;
  width: 100%;
}

section .row {
  display: table-row;
}

section .nestedDiv {
  display: table-row; /* 将嵌套容器转为table-row */
}

section .col {
  display: table-cell;
}

这种方案能让内部col和下方正常row里的col保持完全一致的布局效果。

方案2：使用display: contents让嵌套div透明 #

让浏览器忽略nestedDiv元素，直接将它的子元素当作父元素（row）的直接子元素：

section {
  display: table;
  width: 100%;
}

section .row {
  display: table-row;
}

section .nestedDiv {
  display: contents; /* 使嵌套容器不参与布局，子元素直接归属父级 */
}

section .col {
  display: table-cell;
}

这个方案更简洁，但要注意：display: contents不支持IE浏览器，且该元素自身的样式（如背景、边框）会失效，因为它不再参与页面布局。

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