Ответ 1
Есть трюк, который включает настройку некоторых ячеек на очень маленькую ширину, а затем применение свойства white-space: nowrap:
<table>
<tr>
<td class="min">id</td>
<td class="min">tiny</td>
<td>Fills space</td>
<td>Fills space</td>
<td class="min">123</td>
<td class="min">small</td>
<td>Fills space, wider</td>
<td>Fills space</td>
<td class="min">thin</td>
</tr>
</table>
td {
width: auto;
}
td.min {
width: 1%;
white-space: nowrap;
}
Как вы можете также видеть в приведенной выше nowrap, nowrap заставляет ячейку таблицы предотвращать любые разрывы строк и, таким образом, выравнивает ее ширину до минимально возможного.
ПРИМЕЧАНИЕ. Если у вас есть thead, вы также хотите применить td stylings к th.
UPDATE # 1: Эллипсис (...)
Чтобы автоматически свернуть длинный столбец в эллипсы, многоточие text-overflow: ellipsis то, что вы, скорее всего, ищете:
td.cell-collapse {
max-width: 200px;
overflow: hidden;
text-overflow: ellipsis;
}
Это также требует, чтобы overflow было hidden, а также width или max-width с фиксированным значением. Добавьте класс cell-collapse в ячейки, ширина которых вы хотели бы ограничить.
ОБНОВЛЕНИЕ # 2: Обработка бутстрапа
width: 100%; table загрузки Bootstrap width: 100%; что испортит этот подход. Вы можете исправить это с помощью table { width: inherit !important; } table { width: inherit !important; }
ПРИМЕЧАНИЕ. Таблицы в этом подходе уже имеют полную ширину, поскольку ячейки таблицы уже имеют width: auto; ,
Предыдущее решение Javascript-base удалено, так как чистый CSS-подход теперь работает последовательно во всех современных браузерах. Исходный код по-прежнему доступен на связанном JSfiddle, прокомментированном.