Гибкая ширина в таблице HTML ⇐ CSS

[Anonymous]

Я бы хотел, чтобы моя таблица соответствовала следующим свойствам:

[*]Ширина таблицы составляет 100 % ширины родительского контейнера.
[*]Ширина всех столбцов соответствует максимальной ширине столбца.
[*]Гибкий столбец занимает оставшееся пространство.
< /ul>


На рисунке средний столбец занимает оставшееся горизонтальное пространство, в то время как ширина других столбцов соответствует их содержимому.
Я играл с Flexbox и CSS Grid, но не смог ничего добиться. результат еще. Каков правильный метод?

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

table {
width: 100%;
table-layout: fixed;
border-collapse: collapse;
}

th,
td {
padding: 8px;
border: 1px solid black;
}

th.flex-column,
td.flex-column {
width: auto;
}

th:not(.flex-column),
td:not(.flex-column) {
white-space: nowrap;
}

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

A
B
C




foo
2
3


4
5


6
7

Подробнее здесь: https://stackoverflow.com/questions/787 ... html-table