display: table-column 有什么作用？

Question

根据mdndisplay: table-column应该

表现得像 HTML 元素。

但据我所知，<col> 元素没有显示模式，它们实际上只是 html 的粗略边缘，它定义了标记中的样式。那么 css 中的 table-column 到底应该做什么呢？

Answer 1

它允许您将其他 HTML 元素视为<col> 元素

因为<col> 元素不属于任何内容类别并且不允许它们包含任何内容，所以它们基本上从流中移除并且它们的内容被忽略（就像它们具有display: none 一样）。

与display: none 不同，当正确应用于列组的子项时，table-column 关键字可用于影响与该组中的列关联的单元格（甚至是模拟单元格）的样式。

根据CSS 2.1 §17.2 The CSS table model：

display 设置为 table-column 或 table-column-group 的元素不会被渲染（就像它们具有 display: none 一样），但它们很有用，因为它们可能具有为它们的列引入某种样式的属性代表。

根据CSS 2.1 §17.3 Columns：

表格单元格可能属于两种上下文：行和列。但是，在源文档中，单元格是行的后代，而不是列的后代。不过，单元格的某些方面可能会受到在列上设置属性的影响。

以下属性适用于 column 和 column-group 元素：[border, background, width, visibility]

例如：

.table {
    display: table;
    table-layout: fixed;
    border-collapse: collapse;
    width: 100%;
}
.table-row {
    display: table-row;
}
.table-cell {
    display: table-cell;
    border: 1px solid silver;
    padding: 0.5em;
}
.table-colgroup {
    display: table-column-group;
}
.table-col {
    display: table-column;
}
.col-1 {
    /* Invalid. See: CSS 2.1 §17.3 Columns */
    text-align: center;
}
.col-2 {
    /* Valid.   See: CSS 2.1 §17.3 Columns */
    background-color: tomato;   
}

<div class="table">
    <div class="table-colgroup">
        <div class="table-col col-1">Col 1 (hidden content)</div>
        <div class="table-col col-2">Col 2 (hidden content)</div>
    </div>
    <div class="table-row">
        <div class="table-cell">Row 1, Col 1</div>
        <div class="table-cell">Row 1, Col 2 </div>
    </div>
    <div class="table-row">
        <div class="table-cell">Row 2, Col 1</div>
        <div class="table-cell">Row 2, Col 2</div>
    </div>
    <div class="table-row">
        <div class="table-cell">Row 3, Col 1</div>
        <div class="table-cell">Row 3, Col 2</div>
    </div>
</div>

---

无障碍问题

尽管存在 table-* 显示属性，但对表格使用非语义 HTML 不利于可访问性，因为它可能会导致屏幕阅读器等辅助技术误解数据。

根据Web Accessibility Initiative (WAI) Tables Tutorial：

数据表用于在网格中组织具有逻辑关系的数据。可访问的表格需要 HTML 标记来指示标题单元格和数据单元格并定义它们的关系。辅助技术使用这些信息为用户提供上下文。

如果你想使用非语义标记和 CSS 来构建表格，我建议阅读Tables, CSS Display Properties, and ARIA | Adrian Roselli

Answer 2

虽然您是对的，但它们只是为该列中的每个 td 和 th 定义样式，但从技术上讲，它们本身确实具有 display 模式，因为正是 display: table-column 赋予了它们这种能力。

如果您将<col> 设置为display: none，则相应的表格元素将不再应用在col 中设置的样式（在此Fiddle 中尝试）。

就我个人而言，我觉得这是一种让 HTML 元素表现得像一组 CSS 规则来决定表格内容的样式的方式有点笨拙。