Что делает display: table-column?

Question

По словам МДН display: table-column должен

вести себя как элементы HTML.

Но насколько я знаю, <col> элементы не имеют режима отображения, они на самом деле просто грубый край HTML, который определяет стиль в разметке. Так что же в мире table-column в css должен делать?

Answer 1

Пока вы правы, они просто определяют стили для каждого td а также th в пределах этой колонки они сами технически имеют display режим, потому что это display: table-column это дает им эту способность.

Если вы установите <col> быть display: noneсоответствующие элементы таблицы больше не имеют примененных стилей, заданных в col (попробуйте это в этой скрипке).

Лично я чувствую, что это немного хакерский способ, который позволяет элементу HTML вести себя как набор правил CSS, чтобы определять стили содержимого таблицы.

Answer 2

Это позволяет вам рассматривать другие элементы HTML как <col> элементы

Так как <col> элементы не принадлежат ни к какой категории контента, и им не разрешено содержать какой-либо контент, они по существу удаляются из потока и их содержимое игнорируется.

Это практически эквивалентно display: none за исключением того, что вы получаете дополнительное удобство их использования для назначения стилей столбцам таблицы (даже смоделированным). Примечание: ответ @mattytommo хорошо объясняет, чем он отличается от 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>