CSS 中的'display: table-column”实际上做了什么？

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 table:

<code class="html"><table>
  <tr>
    <td>Cell 1</td>
    <td>Cell 2</td>
  </tr>
  <tr>
    <td>Cell 3</td>
    <td>Cell 4</td>
  </tr>
</table></code>

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

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

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

要记住的要点

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

以上是CSS 中的'display: table-column”实际上做了什么？的详细内容。更多信息请关注PHP中文网其他相关文章！