I’m unable to figure out the CSS styles I need to apply to achieve the following:

• I would like an HTML table with a max-width of up to 400px.
• Within the table, each column should have a max width of 300 px.
• The content within each column should always take up as much space as possible (up to 300px).
• If the columns overflow the width of the table, then the table should be horizontally scrollable.

I created a codepen for this: https://codepen.io/steviedean2004/pen/LYoWREV
Any help would be greatly appreciated!

So far, I have tried this (the !important is just to be for sure).

table {
  table-layout: fixed !important;
}

th {
  max-width: 300px !important;
}

td {
  max-width: 300px !important;
}

However, it seems I’m unable to get the content to take up the width of the column (it always just shrinks, see image).