Фиксация ширины ячейки таблицы в HTML: метод jqGrid

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

Чтобы фиксировать ширину ячеек в HTML-таблице, укажите ширину в пикселях в CSS:

.fixed-width-cell {
    width: 100px; /* Задайте требуемую ширину */
}

Примените этот класс к <td>:

<td class="fixed-width-cell">Текст или контент</td>

Для установки одинакового размера ячеек в таблице свойство table-layout: fixed; применяется к <table>:

table {
    table-layout: fixed; /* А что происходит с текстом? */
}

Использование <col> позволяет точно устанавливать ширину столбцов:

<table>
    <colgroup>
        <col style="width: 100px;">
        <col style="width: 200px;">
    </colgroup>
    <!-- Строки таблицы с <td> здесь -->
</table>

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

.fixed-width-cell {
    overflow: hidden;
    word-wrap: break-word; /* Пусть делает переносы! */
}

Продвинутые приёмы

Управление содержимым с помощью div

Ограничивайте содержимое ячейки с использованием <div>. Это упрощает контроль над выходом за рамки и обеспечивает стабильность ширины:

<td class="fixed-width-cell">
    <div style="overflow: hidden; word-wrap: break-word;">
        Слишком долгий текст или контент, стремящийся выйти за пределы
    </div>
</td>

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

Изменение ширины конкретных столбцов

С помощью CSS-селектора nth-of-type можно изменять ширину отдельных столбцов:

table tr th:nth-of-type(1), table tr td:nth-of-type(1) {
    width: 150px; /* Ведь размер имеет значение */
}

Симуляция поведения jqGrid

Для имитации jqGrid сочетайте table-layout: fixed; с определенными значениями width для <col> или <th>:

table.jq-grid { table-layout: fixed; /* Я зафиксирован, а вы? */}
table.jq-grid col { width: 120px; /* Стояк */}

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

Внешний вид установки ширины ячейки в HTML ассоциируется с укладкой кирпичей 🧱. Каждый "кирпич" – это ячейка с фиксированной шириной:

Каждый "кирпич" или, иначе говоря, ячейка, держит своё место, оставаясь устойчивым и надёжным.

Сложные сценарии и решения

Анализ свойства table-layout

При установке table-layout как fixed; размеры содержимого игнорируются, и ширина столбцов определяется по первой строке, <col> или <th>. Это может скрыть некоторые данные, если их обработать некорректно.

Сохранение контента при переполнении

Свойство overflow: hidden; может скрыть выступающий контент. Используйте overflow: auto;, чтобы сохранить его на виду, либо регулируйте ширину столбцов.

Установка ширины столбцов

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

Адаптивность таблиц

Для создания гибкой верстки под разные экраны используйте проценты или единицы в зависимости от размеров окна просмотра вместо пикселей. Медиа-запросы помогут адаптировать таблицы под различные устройства.

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

1. Оформление таблиц в CSS — Детальное руководство по стилями ширины таблиц.
2. Фиксированные таблицы на CSS-Tricks — Дискуссия о фиксированных таблицах для управления ширинами.
3. <col>: Элемент таблицы – HTML на MDN — Документация по элементу <col> для установления ширины столбцов.
4. Таблицы на сайте Smashing Magazine — Примеры адаптивного дизайна таблиц.
5. Всё об элементе таблицы на CSS-Tricks — Углубленное изучение элемента таблицы и его практик.
6. Адаптивные таблицы на SitePoint — Рассмотрение адаптивных таблиц с использованием CSS.
7. Стилизация таблиц на MDN — Руководство по стилям с наилучшими методами и примерами.