Фиксировать ширину столбцов в HTML-таблице: решение без div

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

Для того чтобы ширина колонок таблицы не изменялась в зависимости от ее содержимого, воспользуйтесь CSS-свойством table-layout: fixed; и определите ширину для <th> и <td>:

<style>
  /* Фиксация макета таблицы и ее ширины */
  table { 
    table-layout: fixed; 
    width: 300px;  
  }

  /* Установка фиксированной ширины для колонок */
  th, td { 
    width: 100px;
    overflow: hidden;
  }
</style>

<table>
  <tr><th>Заголовок</th><th>Заголовок</th><th>Заголовок</th></tr>
  <tr><td>Данные</td><td>Содержимое, которое не растянет колонку</td><td>Данные</td></tr>
</table>

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

Современная настройка таблиц

Отказывайтесь от использования устаревших HTML-атрибутов при определении размеров таблиц. Используйте вместо этого CSS:

<!-- Не используйте устаревший подход -->
<table width="300px"></table>

Замените его на современный подход:

/* Современный подход */
table { width: 300px; }

Управление переполнением содержимого

Иногда содержимое ячеек может попытаться выйти за рамки установленных границ. Чтобы избежать этого, используйте word-wrap: break-word; и overflow: hidden;:

td {
  /* Перенос слов */
  word-wrap: break-word;

  /* Скрытие переполнения */
  overflow: hidden;
}

Разработка таблиц с фиксированными размерами для маленьких экранов

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

/* Адаптивность таблиц */
table { width: 100%; }
th, td { width: 33.33%; }

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

Учёт особенностей работы разных браузеров

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

- [Демонстрация в действии на jsFiddle](#)

Флексибильность превыше всего

Не все колонки обязаны быть фиксированными. Можно сочетать статичные и динамические колонки:

table { width: 100%; table-layout: fixed; }
.fixed-width { width: 150px; }
.flexible-width { width: auto; }

В данном случае колонки с классом .flexible-width будут масштабироваться, в отличие от .fixed-width.

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

Представим таблицу в виде парковки с фиксированными местами для машин:

|🅿️Фиксированное место |🅿️Фиксированное место |🅿️Фиксированное место |
|-----------------------|-----------------------|-----------------------|

Даже в случае наличия крупногабаритного содержимого:

|🅿️Фиксированное место|🅿️Фиксированное место |🅿️Фиксированное место |
|----------------------|-----------------------|-----------------------|
|🚚Огромный контент    |

Каждое парковочное место сохраняет свой размер:

|🅿️Фиксированное место|🅿️Фиксированное место |🅿️Фиксированное место |
|----------------------|🚗Обычное авто         |🛵Мотоцикл             |

Это подобно бетону: он неподвижен и надежен, не зависит от размера автомобиля.

Семантика превыше всего

Избегайте применения тега div в таблицах – это усложняет код и отходит от семантики HTML.

Применяйте стили напрямую к тегам th или td. Это будет соответствовать логической структуре HTML.

Особенности работы с электронной почтой

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

Доступность – приоритет

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

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

1. CSS свойство table-layout — Руководство по CSS свойству разметки таблицы на W3Schools.
2. <col>: Элемент колонки таблицы — Применение HTML-элемента для задания ширины колонок таблицы.
3. Disabled input text color in iOS — Обсуждение изменения стилей таблицы.
4. Полное руководство по таблицам — Глубокое руководство по работе с таблицами на сайте CSS-Tricks.
5. Can I use... Support tables for HTML5, CSS3, etc — Сведения о поддержке свойства table-layout в различных браузерах.
6. Responsive Data Tables — Руководство по созданию адаптивных таблиц с фиксированной шириной колонок на CSS-Tricks.