Настройка ширины колонок в таблице CSS: fixed-layout

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

Для увеличения ширины определенной колонки в таблице с фиксированным расположением элементов ("table-layout: fixed"), укажите атрибут width прямой для th или td нужной вам колонки.

<table style="table-layout: fixed;">
  <colgroup>
    <col>
    <col style="width: 200px;"> <!-- Вот она, увеличенная в ширину колонка! -->
    <col>
  </colgroup>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
  <!-- продолжение таблицы... -->
</table>

Данный подход позволяет увеличить ширину выбранной вами колонки, оставляя ширину остальных колонок без изменений. Всё просто и ясно!

Персональная ширина колонок в нашем управлении

Если вам нужно контролировать ширину каждой колонки по отдельности, используйте CSS-правила таким образом:

<col style="width: 150px;"> <!-- Так мы "паркуем" небольшой автомобиль на большом месте -->
<col> <!-- Для остальных колонок ширина будет автоматической -->

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

Разбираемся с fixed и auto

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

table { 
  width: 100%; 
  table-layout: fixed; /* Эквивалент аэропорта в час пик */
}

Так, если для колонок ширина не указана, они делят оставшееся пространство равномерно.

Использование nth-child в сложных ситуациях

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

table th:nth-child(2), 
table td:nth-child(2) { 
  width: 200px; // Пример изменения ширины конкретной колонки
}

.wide {
  width: 200px;
}

Данный пример объясняет, как сделать вторую ячейку каждого ряда шире, словно делая ее центральной в таблице.

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

Проще всего сравнить расстановку ширины колонок с парковкой автомобилей:

| Авто |     |     |     |     |  -> Обычные парковочные места

Если нам нужно больше места для автобуса, мы увеличиваем размер места:

| Авто |     | 🚍   |     |     |  -> Вот и VIP-место для "автобуса"

При использовании HTML дополнительное пространство для определенной колонки становится аналогично персональной парковке:

<table style="table-layout: fixed; width: 100%;">
  <colgroup>
    <col style="width: 25%;">
    <col style="width: 25%;">
    <col style="width: 35%;"> <!-- Это ваша персональная VIP-колонка -->
    <col style="width: 15%;">
  </colgroup>
  <!-- тело таблицы -->
</table>

Достижимость "схлопывания границ"

Применение CSS-правила border-collapse: collapse; предотвращает наличие нежелательных промежутков между ячейками, создавая элегантный вид таблицы.

table {
  border-collapse: collapse; /* Таблицы больше не имеют промежутков */
}

Динамизм дизайна и гибкость

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

Две таблицы рядом – редкий случай

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

<!-- Отдельная таблица для первой колонки -->
<table style="float: left; width: 300px;">
  <!-- содержимое первой колонки здесь -->
</table>

<!-- Отдельная таблица для остальных колонок -->
<table style="float: left; width: auto;">
  <!-- содержимое остальных колонок здесь -->
</table>

Посмотрите пример в действии!

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

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

1. Таблицы – W3C — Основные рекомендации по созданию HTML-таблиц.
2. table-layout – CSS: Каскадные таблицы стилей | MDN — Руководство по использованию фиксированной вёрстки таблицы.
3. Полное руководство по элементу Table | CSS-Tricks — Обзор возможностей и фич HTML-таблиц.
4. Отзывчивые таблицы данных | CSS-Tricks — Решения для адаптивных таблиц с прокруткой.
5. Топ-10 дизайнов CSS-таблиц — Smashing Magazine — Несколько захватывающих концепций дизайна таблиц для вдохновения.
6. .width() | Документация API jQuery — Если вам необходиммо что-то большее, чем просто HTML и CSS, тогда на ваших услугах jQuery.