Как задать одинаковую ширину колонок в таблице, если контент организован в thead и tbody, а каждая строка (tr) разделена на три части (div)?

Question

Геннадий

css-grid

Как задать одинаковую ширину колонок в таблице, если контент организован в thead и tbody, а каждая строка (tr) разделена на три части (div)?

Я нашел <a href="https://codepen.io/kotcich/pen/ByaqdOO" rel="nofollow">базовый пример</a> и, похоже, мне нужно добиться горизонтального скролла, если элементы подогнать 1 к 1. Моя цель - сделать это автоматическим, чтобы не нужно было заранее указывать количество колонок и строк, но готов рассмотреть и другой подход. Уже два дня мучаюсь с этой задачей, так как недавно начал изучать гриды, и не могу разобраться, что конкретно требуется. Пробовал менять селекторы "на глаз", но пока безуспешно. Можете помочь с рекомендациями?

29 марта 2025 г. 11:15

Ответы на вопрос 1

Похожие вопросы

Answer 1

Конечно! Для достижения цели создания таблицы с одинаковой шириной колонок, где контент организован в `thead` и `tbody`, а строки содержат три `div`, можно использовать CSS Grid или Flexbox, в зависимости от ваших предпочтений. Ниже приведен пример с использованием CSS Grid, который автоматически выстраивает колонки с одинаковой шириной и добавляет горизонтальную прокрутку, если их количество превышает ширину контейнера.

### Пример HTML и CSS

```html
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Таблица с горизонтальным скроллом</title>
    <style>
        .table-container {
            overflow-x: auto;
            width: 100%;
            border: 1px solid #ccc;
        }

        table {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); /* Устанавливаем колонки с одинаковой шириной */
            width: max-content; /* Таблица будет расширяться по содержимому */
        }

        thead {
            display: contents; /* Позволяет заголовку вести себя как обычные ячейки */
        }

        th, td {
            border: 1px solid #ccc;
            padding: 8px;
            text-align: left;
            background-color: #f9f9f9;
        }

        tbody {
            display: contents; /* Аналогично thead */
        }

        tr {
            display: contents; /* Оптимизируем строки для grid */
        }

        .cell {
            padding: 10px;
            border: 1px solid #ccc;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="table-container">
        <table>
            <thead>
                <tr>
                    <th class="cell">Заголовок 1</th>
                    <th class="cell">Заголовок 2</th>
                    <th class="cell">Заголовок 3</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td class="cell">Данные 1.1</td>
                    <td class="cell">Данные 1.2</td>
                    <td class="cell">Данные 1.3</td>
                </tr>
                <tr>
                    <td class="cell">Данные 2.1</td>
                    <td class="cell">Данные 2.2</td>
                    <td class="cell">Данные 2.3</td>
                </tr>
                <tr>
                    <td class="cell">Данные 3.1</td>
                    <td class="cell">Данные 3.2</td>
                    <td class="cell">Данные 3.3</td>
                </tr>
            </tbody>
        </table>
    </div>
</body>
</html>
```

### Основные моменты

1. **CSS Grid**: Используется для разметки таблицы. `grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));` позволяет создавать колонки с минимальной шириной 100 пикселей и равными пропорциями.

2. **Горизонтальная прокрутка**: За счёт использования `overflow-x: auto` в контейнере, если ширина таблицы превышает ширину контейнера, появится полоса прокрутки.

3. **Свойства `display: contents`**: Позволяет `thead` и `tbody` не влиять на разметку Grid, что позволяет непосредственно работать с ячейками.

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