Таблица фиксированной длины со столбцами максимальной ширины ⇐ CSS

[Anonymous]

Я не могу определить, какие стили CSS мне нужно применить, чтобы добиться следующего:

• Мне нужна таблица HTML с максимальным размером ширина до 400 пикселей.
• В таблице каждый столбец должен иметь максимальную ширину 300 пикселей.
• Содержимое внутри каждого столбца всегда должно быть занимайте как можно больше места (до 300 пикселей).
• Если столбцы выходят за пределы ширины таблицы, то таблица должна иметь возможность горизонтальной прокрутки.

Для этого я создал код: https://codepen.io/steviedean2004/pen/LYoWREV
Буду очень признателен за любую помощь!
Пока я это пробовал (важно, чтобы быть уверенным).

Код: Выделить всё

table {
table-layout: fixed !important;
width: 400px;
overflow: auto;
}

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

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

Однако, похоже, мне не удается заставить контент занимать ширину столбца (он всегда просто сжимается, см. изображение).

Подробнее здесь: https://stackoverflow.com/questions/785 ... -max-width