Установка минимальной ширины ячеек в таблице 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, поможет убедиться в правильности компоновки таблицы.

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