Why can't I hide a table column in CSS using the <col> property?

Question

I found how I can hide a table column in this thread.

I first tried

<colgroup>
  ...
  <col style="visibility:hidden;">
  ...
</colgroup>

and also

<colgroup>
  ...
  <col style="display:none;">
  ...
</colgroup>

but neither has any effect. I noticed that other styling properties don't work either on <col>s either.
What can the <col> tag be used for, and what would be its typical use?

Answer 1

The <col> element only applies certain CSS properties to the cells within the targeted column. One of these properties is visibility:collapse, which will have the desired effect of hiding the entire column.

Therefore, to hide an entire column, the correct code would be

<col style="visibility: collapse;">

Reference: https://www.w3.org/TR/CSS21/tables.html#columns

Answer 2

that's because the col-element isn't "visible" in the first place, it's just an "alias" for the table columns. If you want to hide the second column for-example, apply it directly to the tds like:

tr td:nth-child(2)
{
 display: none;
 /* or */
 visibility: hidden;
}