Как автоматически изменить размер ячейки HTML-таблицы под размер текста?

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

Если вы не хотите, чтобы текст переносился на следующую строку, примените к ячейкам стиль CSS white-space: nowrap.

Вы можете попробовать следующий код для достижения желаемого результата:

HTML:

<table>
    <tr>
        <td class="shrink">element1</td>
        <td class="shrink">data</td>
        <td class="shrink">junk here</td>
        <td class="expand">последний столбец</td>
    </tr>
    <tr>
        <td class="shrink">elem</td>
        <td class="shrink">more data</td>
        <td class="shrink">другие вещи</td>
        <td class="expand">снова, последний столбец</td>
    </tr>
    <tr>
        <td class="shrink">more</td>
        <td class="shrink">of</td>
        <td class="shrink">these</td>
        <td class="expand">строки</td>
    </tr>
</table>

CSS:

table {
    border: 1px solid green;
    border-collapse: collapse;
    width: 100%;
}

table td {
    border: 1px solid green;
}

table td.shrink {
    white-space: nowrap;
}

table td.expand {
    width: 99%;
}

Этот код создаст таблицу, в которой первые три столбца будут сжиматься по своему содержимому, а последний столбец будет занимать оставшееся пространство.

Я тоже сталкивался с этой проблемой и вот как я ее решил: добавьте table-layout: auto; к элементу <table>.