Как я могу стилизовать таблицу с заголовком, чтобы все столбцы, кроме одного, соответствовали их содержимому, а последни ⇐ CSS

[Anonymous]

Я хочу, чтобы ширина всех столбцов в моей таблице соответствовала их содержимому, ни больше, ни меньше. Я хочу, чтобы эта ширина оставалась такой же, как и размер экрана. Я хочу, чтобы один столбец в моей таблице увеличился, чтобы заполнить оставшееся пространство. Его ширина должна меняться при изменении размера окна.
Моя проблема в том, что с несколькими строками и заголовком таблицы я не знаю, как этого добиться. Я могу заставить его работать, жестко запрограммировав ширину столбцов, которые я хочу оставить статичными, но я этого не хочу — я хочу, чтобы их ширина определялась содержимым.
Это работает (на основании другого ответа о переполнении стека), но не адаптируется к содержимому в столбцах 1 и 2

< div class="snippet-code">

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

table {
display: table;
width: 100%;
table-layout: fixed;
position: absolute;
top: 0;
}

.small {
background: green;
width: 80px;
}

.extend {
background: red;
}

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

Column 1
Column 2
Column 3



First column
This column should fill the remaining space 
Small column 2

Вот моя скрипка.

Подробнее здесь: https://stackoverflow.com/questions/792 ... their-cont