What does display: table-column do?

Question

According to mdn display: table-column should

behave like HTML elements.

But as far as I know, <col> elements have no display mode, they're actually just a rough edge of html which defines style in markup. So what in the world is table-column in css supposed to do?

Answer 1

Whilst you're correct they simply define the styles for every td and th within that column, they themselves technically do have a display mode because it's the display: table-column that gives them this ability.

If you set a <col> to be display: none, the corresponding table elements no longer have the styles applied that were set in the col (Try it in this Fiddle).

Personally, I feel it's a bit of a hacky way that allows a HTML element to behave like a set of CSS rules to dictate the styles of a table's contents.

Answer 2

It allows you to treat other HTML elements as <col> elements

Because <col> elements belong to no content category and they aren't permitted to contain any content, they are essentially removed from the flow and their content ignored (exactly as if they had display: none).

Unlike display: none, when properly applied to children of a column-group, the table-column keyword may be used to affect the styles of cells (even simulated ones) associated with columns within that group.

According to CSS 2.1 §17.2 The CSS table model:

Elements with display set to table-column or table-column-group are not rendered (exactly as if they had display: none), but they are useful, because they may have attributes which induce a certain style for the columns they represent.

According to CSS 2.1 §17.3 Columns:

Table cells may belong to two contexts: rows and columns. However, in the source document cells are descendants of rows, never of columns. Nevertheless, some aspects of cells can be influenced by setting properties on columns.

The following properties apply to column and column-group elements: [border, background, width, visibility]

For example:

.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>

---

Accessibility concerns

Despite the existence of the table-* display properties, using non-semantic HTML for tables is bad for accessibility because it may cause assistive technology such as screen readers to misinterpret the data.

According to the Web Accessibility Initiative (WAI) Tables Tutorial:

Data tables are used to organize data with a logical relationship in grids. Accessible tables need HTML markup that indicates header cells and data cells and defines their relationship. Assistive technologies use this information to provide context to users.

If you are tempted to use non-semantic markup and CSS to build a table, I suggest reading Tables, CSS Display Properties, and ARIA | Adrian Roselli