Search code examples
csscss-tables

What does display: table-column do?


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?


Solution

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