Подтвердить что ты не робот

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

У меня есть таблица с 2 строками и переменными столбцами. Я попробовал width = 100% для столбца. Таким образом, первый контент в представлении будет соответствовать. Но предположим, что если я динамически меняю содержимое, это не динамически увеличивает/уменьшает размер столбца таблицы HTML. Спасибо заранее.

Ответ 1

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

Если вам не нужен перенос слов, назначьте стиль CSS white-space: nowrap ячейкам.

Ответ 2

Вы можете попробовать следующее:

HTML

<table>
    <tr>
        <td class="shrink">element1</td>
        <td class="shrink">data</td>
        <td class="shrink">junk here</td>
        <td class="expand">last column</td>
    </tr>
    <tr>
        <td class="shrink">elem</td>
        <td class="shrink">more data</td>
        <td class="shrink">other stuff</td>
        <td class="expand">again, last column</td>
    </tr>
    <tr>
        <td class="shrink">more</td>
        <td class="shrink">of </td>
        <td class="shrink">these</td>
        <td class="expand">rows</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%
}