显示：table-column有什么作用？

Question

根据mdn display: table-column应该

  

表现得像HTML元素。

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

Answer 1

虽然您是正确的，但他们只是为该列中的每个@Override @Transactional(propagation = Propagation.REQUIRES_NEW) public void addSeller(SellerBO sellerBO) throws ServiceException { sellerDAOImpl.addSeller(sellerDO); } 和td定义了样式，但他们自己在技术上确实采用th模式，因为它是display这给了他们这种能力。

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

就个人而言，我觉得这有点像一种hacky方式，它允许HTML元素表现得像一组CSS规则来指示表格内容的样式。

Answer 2

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

由于<col>元素不属于任何内容类别且不允许包含任何内容，因此它们基本上已从流中删除，并忽略其内容。

这实际上等同于display: none，除了您可以更方便地使用它们为表格列（甚至是模拟列）分配样式。 注意：@mattytommo's answer很好地解释了它与display: none的区别。

见下文：

.table {
    display: table;
    table-layout: fixed;
    border-collapse: collapse;
    width: 100%;
}
.table-row {
    display: table-row;
}
.table-cell {
    display: table-cell;
    border: 1px solid #abc;
    padding: 0.5em;
}
.table-colgroup {
    display: table-column-group;
}
.table-col {
    display: table-column;
}
.col-1 {
    text-align: center;   
}
.col-2 {
    background-color: Tomato;   
}

<div class="table">
    <div class="table-colgroup">
        <div class="table-col col-1">Foo</div>
        <div class="table-col col-2">Bar</div>
    </div>
    <div class="table-row">
        <div class="table-cell">Hello</div>
        <div class="table-cell">World</div>
    </div>
    <div class="table-row">
        <div class="table-cell">Hello</div>
        <div class="table-cell">World</div>
    </div>
    <div class="table-row">
        <div class="table-cell">Hello</div>
        <div class="table-cell">World</div>
    </div>
</div>