How to set the table column width constant regardless of the amount of text in its cells with CSS?

To set the table column width constant regardless of the amount of text in its cells with CSS, we set the width of the col element.

For instance, we write

<table>
  <colgroup>
    <col style="width: 40%" />
    <col style="width: 30%" />
    <col style="width: 30%" />
  </colgroup>
  <tbody>
    ...
  </tbody>
</table>

to set the col element to have width 40% and 30%.

Then the cells in each column will follow the width if the col element is in the same position as the td in the row.