Как определить минимальную ширину столбца в таблице

Question

У меня есть таблица с 2 столбцами, которая охватывает весь экран. Таблица может быть примерно такой:

<table style="width:100%">
   <tr>
       <td>Column1</td>
       <td>Column2</td>
   </tr>
</table>

Я хочу, чтобы столбец 1 занимал столько ширины, сколько необходимо для отображения его содержимого без принудительного переноса строк. Я не хочу указывать ширину в пикселях или процентах, потому что содержимое сильно различается.

Это достижимо с помощью CSS?

Answer 1

Я думаю, что это можно сделать, используя flex и присвоив flex-grow: 1 столбцу, который вы хотите охватить оставшейся шириной:

tr {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;

    flex-direction: row;

    align-items: stretch;
    justify-content: center;

    flex-wrap: wrap;

    background-color: orange;
}
td {
    width: auto;
    background-color: red;
}
td:nth-of-type(2) {
    flex-grow: 1;
    background-color: green;
}

<table style="width:100%">
    <tr>
        <td>Column1</td>
        <td>Column2</td>
    </tr>
</table>