Фиксация ширины столбца в HTML таблице: 100px, независимо от текста

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

Чтобы заставить колонки таблицы сохранять установленную ширину независимо от количества содержимого, примените к таблице свойство table-layout: fixed; и задайте точное значение width для каждого th или td. Чтобы избежать переполнения содержимого и обеспечить его корректное скрытие, также стоит добавить overflow: hidden; text-overflow: ellipsis; white-space: nowrap;.

В таблице с четырьмя колонками код выглядит так:

<style>
  /* Задаём атрибуты для нашей таблицы */
  table { table-layout: fixed; width: 100%; }
  
  /* Устанавливаем ширину ячеек */
  th, td { width: 25%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
</style>

<table>
  <tr><th>Кол 1</th><th>Кол 2</th><th>Кол 3</th><th>Кол 4</th></tr>
  <tr><td>Здесь длинный текст</td><td>Короткий</td><td>Средний текст</td><td>Снова длинный</td></tr>
</table>

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

Ваш набор инструментов

Использование тегов colgroup и col

С помощью тегов <colgroup> и <col> можно установить конкретную ширину для каждой колонки:

<table>
  <colgroup>
    <col style="width:100px">
    <col style="width:150px">
    <col style="width:200px">
  </colgroup>
  <!-- Здесь располагаются строки и ячейки таблицы -->
</table>

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

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

Метод оборачивания содержимого в div

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

<td>
  <!-- В этом div текст будет надёжно защищён -->
  <div style="width: 100px; overflow: hidden; text-overflow: ellipsis;">Много текста здесь</div>
</td>

Определение максимальной и минимальной ширины

Можно установить диапазон для ширины ячеек с помощью min-width и max-width, даже если содержимое ячеек меняется динамически.

th, td {
  /* Никто не переступит эти границы */
  min-width: 100px; max-width: 100px; overflow: hidden; 
}

Полезные приёмы

Улучшение читаемости с помощью границ

При добавлении границ к th или td отдельные ячейки выделяются, благодаря чему улучшается читаемость таблицы:

th, td { border: 1px solid #ccc; }

Управление большим объемом содержимого

Если содержимое занимает большую часть ячейки, рекомендуется поместить его в div с возможность прокрутки:

<td>
  <!-- Скроллинг – наше мощное оружие! -->
  <div style="max-height: 100px; overflow-y: auto;">Здесь очень много текста...</div>
</td>

Адаптивная верстка с процентными ширинами

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

<colgroup>
  <col style="width:30%">
  <col style="width:70%">
</colgroup>

Соблюдайте принцип GEM

Не забывайте о принципах Графики (G), Эмоциональности (E) и Минимализма (M) при работе с текстами и поддержании визуальной гармонии композиции.

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

Вот простой способ представления концепции:

| Этаж 1   | Этаж 2   | Этаж 3   |
| -------- | -------- | -------- |
| 📦📦     | 📦       | 📦📦📦📦   |
| Фиксировано| Фиксировано| Фиксировано|

Объем содержимого в каждой ячейке (количество коробок на этаже) может различаться, но структура таблицы (здания) остается стабильной.

Предотвращение типичных проблем

Управление разницей в размерах содержимого

Содержимое ячеек, существенно отличающееся по объему, может создать проблемы с недозаполнением или переполнением некоторых ячеек. Поможет использование иконок или небольших изображений с максимально лаконичным текстом, чтобы сохранить эстетичный вид таблицы.

Согласование с шириной страницы

Если ваша таблица слишком широкая или узкая для страницы, вы можете задать для неё прямую ширину в CSS, позволяя содержимому адаптироваться под заданные размеры.

table { width: 600px; /* Оптимальный размер! */ }

Обработка длинного текста в ячейках

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

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

1. CSS Styling Tables – Руководство по стилизации таблиц в CSS и их структурированию.
2. table-layout – CSS: Cascading Style Sheets | MDN – Обзор свойства table-layout.
3. min-width | CSS-Tricks – CSS-Tricks – Детальный обзор свойств min-width и max-width.
4. Responsive Data Tables | CSS-Tricks – CSS-Tricks – Техники адаптивной верстки данных в таблицах.
5. Fixed Table Layouts | CSS-Tricks – CSS-Tricks – Методы работы с таблицами, содержащими длинные строки, и управления прокруткой.
6. CSS white-space property – Использование свойства white-space в верстке таблиц.
7. display – CSS: Cascading Style Sheets | MDN – Описание различных значений свойства display в CSS.