Установка минимальной ширины ячеек в таблице CSS

Быстрый ответ

Для установки минимальной ширины ячеек в таблице, сохраняя при этом автоматически увеличивающийся последний столбец, вам потребуется применить к ячейкам стили CSS width: 1% и white-space: nowrap, исключая последний столбец. Таким образом, ячейки смогут сжаться до минимума, а последний столбец займет всё свободное пространство. Вот как это будет выглядеть в CSS:

td:not(:last-child) { 
  white-space: nowrap;
  width: 1%;
}

td:last-child { 
  width: auto;
}

Примените эти стили к элементам <td> вашей таблицы и увидите результат.

Подробное изложение HTML-структуры таблицы

Углубленное понимание HTML поможет вам в эффективной настройке таблиц. Для того чтобы столбцы имели постоянную ширину, используйте свойство table-layout: fixed и предотвратите нежелательные переносы текста, которые могут нарушить границы ячеек из-за переполнения содержимого.

Подробная настройка посредством CSS

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

Борьба с переполнением содержимого

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

Подробнее об этом расскажет наш спикер на видео

Преимущества последней колонки

Задайте для последней колонки свойство ширины auto, что позволит ей занять все доступное пространство.

Ровные границы

Обеспечьте аккуратный вид, применив к таблице стиль border-collapse: collapse.

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

Удовлетворение требований доступности

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

Визуализация

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

[🚃🚃🚃][🚃🚃🚃][🚃🚃🚃][🚃:безграничное пространство..]

Расширение возможностей

Ознакомьтесь с дополнительными приемами работы с таблицами:

Удобство чтения: отступы

Повысьте читаемость таблицы, добавив отступы в <td>.

td {
  padding: 5px;
}

Гибкость в количестве столбцов

В случае изменения количества колонок используйте селекторы :nth-child или :not(:last-child).

Элегантность LaTeX

Для работы со сложными таблицами изучите возможности форматирования, аналогичные LaTeX.

Адаптивное формирование таблиц

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

Отладка в jsFiddle

Тестирование в реальном времени на платформах, таких как jsFiddle, поможет убедиться в правильности компоновки таблицы.

Полезные материалы