为什么 CSS 表格布局中的“display: table-column”不能按预期工作？

为什么“display: table-column”在我的 CSS 布局中不起作用？

鉴于提供的 HTML 和 CSS 代码，您可能期望看到具有两列（“colLeft”和“colRight”）和三行（“row1”、“row2”和“row3”）的布局。然而，在 Chrome 和 IE 等浏览器中，整个布局会折叠为零大小。

这种行为源于对 CSS 表格模型工作原理的根本误解。虽然它类似于 HTML 表格模型，但存在重大差异：

• 列不是直接容器：在 HTML 表格中，列 ("") 不直接含有细胞。相反，单元格（“”）是行（“ ”）的子项。此结构在 CSS 表格模型中维护。
• “display: table-column”定义单元格属性： 在元素上使用“display: table-column”不会在传统意义上。相反，它设置适用于表行中的单元格的属性。例如，您可以使用它来定义每行中第一个单元格的背景颜色。
• 标准表格结构：表格的整体结构与 HTML 中的相同。行包含单元格，列不包含任何直接内容。

正确的 HTML 和 CSS 结构：

要创建有效的 CSS 表格布局，您应该使用以下结构：

<code class="html"><div class="mytable">
  <div class="mycolumn1"></div>
  <div class="mycolumn2"></div>
  <div class="myrow">
    <div class="mycell">Contents of first cell in row 1</div>
    <div class="mycell">Contents of second cell in row 1</div>
  </div>
  <div class="myrow">
    <div class="mycell">Contents of first cell in row 2</div>
    <div class="mycell">Contents of second cell in row 2</div>
  </div>
</div></code>

<code class="css">.mytable {
  display: table;
}
.mycolumn1 {
  display: table-column;
  background-color: green;
}
.mycolumn2 {
  display: table-column;
  background-color: red;
}
.myrow {
  display: table-row;
}
.mycell {
  display: table-cell;
}</code>

以上是为什么 CSS 表格布局中的“display: table-column”不能按预期工作？的详细内容。更多信息请关注PHP中文网其他相关文章！