What displays: table-column?

Question

According to mdn display: table-column should

behave like HTML elements.

But as far as I know, <col> elements do not have a display mode, they are actually just a rough html edge that defines the style in the markup. So what in the table-column world in css should do?

Answer 1

While you're right, they just define styles for each td and th inside this column, they themselves technically have a display mode, because it display: table-column gives them this opportunity.

If you set <col> as display: none , the corresponding table elements will no longer have the styles applied that were set to col (try this Fiddle ).

Personally, I feel this is a bit of a hacker way that allows an HTML element to behave like a set of CSS rules to dictate styles of table contents.

Answer 2

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

Since <col> elements do not belong to the content category and are not allowed to contain any content, they are essentially removed from the stream and their contents are ignored.

This is actually equivalent to display: none , except that you get the added convenience of using them to style styles for table columns (even simulated ones). Note: @mattytommo answer explains how it differs from display: none .

See below:

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