CSS“display: table-column”应该如何工作？

在 HTML 中，表格由行组成，每行含有细胞。 CSS 扩展了这个概念，允许设计者定义特定的行和列布局。虽然“display: table-row”和“display: table-cell”很简单，但“display: table-column”有更微妙的目的。

理解“display: table-”的功能column"

与“display: table-row”和“display: table-cell”不同，“display: table-column”不会建立新的列结构。相反，它为现有表行中的单元格设置属性。例如，您可以指定每行中第一个单元格的背景颜色。

HTML 与 CSS 表格结构

要理解这个概念，请考虑以下 HTML表：

  

    
Cell 1
    
Cell 2
  
  

    
Cell 3
    
Cell 4
  

对应HTML结构，可以应用如下CSS：

.mytable {
  display: table;
}
.myrow {
  display: table-row;
}
.mycell {
  display: table-cell;
}
.column1 {
  display: table-column;
  background-color: green;
}
.column2 {
  display: table-column;
}

在此示例中，“.column1”和“.column2”div 不是内容容器。它们仅定义表格行中单元格的属性。

要记住的要点

• "display: table-column" 设置表格行中单元格的属性，不适用于列本身。
• 底层表格结构与 HTML 中的相同，单元格是行的子级。
• "显示： table-column”不提供多列布局机制，其中内容在列之间流动。