Как создать хитрублицу с помощью CSS?

Question

Талик

flexbox , css , css-grid

Как создать хитрублицу с помощью CSS?

Как можно изменить отображение данной таблицы, чтобы фамилия, имя и отчество (ФИО) оставались на одной строке и фиксировались, в то время как остальные данные отображались на второй строке в виде колонок? При этом необходимо предусмотреть горизонтальный скролл, если ширина таблицы меньше ширины содержимого, с условием, что ФИО будет оставаться фиксированным во время прокрутки. Необходимо сохранить исходную структуру HTML.

2 октября 2024 г. 17:34

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

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

Answer 1

Для реализации хитрублицы с фиксированным ФИО и горизонтальным скроллом в CSS вам нужно использовать стили, которые позволяют зафиксировать позицию определенных столбцов и настроить прокрутку. Вот пример подхода с использованием `position: sticky` и свойства `overflow` для создания горизонтальной прокрутки.

### HTML

```html
<table class="hit_table">
    <thead>
        <tr>
            <th class="fixed">ФИО</th>
            <th>Должность</th>
            <th>Отдел</th>
            <th>Телефон</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class="fixed">Иванов Иван Иванович</td>
            <td>Менеджер</td>
            <td>Продажи</td>
            <td>+7 (123) 456-78-90</td>
        </tr>
        <tr>
            <td class="fixed">Петров Петр Петрович</td>
            <td>Разработчик</td>
            <td>ИТ</td>
            <td>+7 (123) 456-78-91</td>
        </tr>
        <!-- Добавьте больше строк по необходимости -->
    </tbody>
</table>
```

### CSS

```css
body {
    margin: 0;
    font-family: Arial, sans-serif;
    overflow-x: auto; /* горизонтальный скролл для body */
}

.hit_table {
    width: 100%; /* ширина таблицы */
    border-collapse: collapse; /* убираем двойные границы */
}

.hit_table th, .hit_table td {
    border: 1px solid #ddd; /* границы ячеек */
    padding: 8px; /* внутренние отступы */
    text-align: left; /* выравнивание текста */
}

.hit_table th {
    background-color: #f2f2f2; /* цвет заголовка */
    position: sticky; /* фиксированное позиционирование */
    top: 0; /* прилипание к верхней части */
}

.hit_table td.fixed {
    position: sticky; /* фиксированное позиционирование для ячейки ФИО */
    left: 0; /* прилипание к левому краю таблицы */
    background-color: #fff; /* цвет ячейки ФИО для контраста */
    z-index: 1; /* выводим ячейку на передний план */
}
```

### Объяснение кода

1. **HTML**: В таблице есть фиксированный столбец ФИО, который обозначен классом `fixed`. Остальные столбцы будут менять свое положение при прокрутке.

2. **CSS**:
   - **`overflow-x: auto;`** на теле документа позволяет показывать горизонтальный скролл, если ширина таблицы превышает ширину видимого окна.
   - **`position: sticky;`** используется для того, чтобы зафиксировать заголовки таблицы (включая ячейку ФИО) при прокрутке.
   - **`top: 0;`** у заголовков и **`left: 0;`** у ячейки ФИО задают прилипание к верхней и левой граням соответственно.
   - **`z-index: 1;`** для ячейки с ФИО позволяет ей оставаться сверху при наложении.

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