Урок 19 · CSS

Шапка, зебра и прокрутка на узком экране

Таблица с данными остаётся таблицей. CSS делает её читаемее и не даёт раздвинуть всю страницу.

Почему это следующий шаг

Форма была узкой колонкой. Таблица наоборот широкая, и её легко сломать на телефоне.

Как сделать

Заголовкам задай фон и выравнивание. Зебру можно сделать через nth-child для строк тела. Числа выравнивай вправо. Оберни таблицу в блок с overflow-x: auto, чтобы на телефоне ехала таблица, а не весь сайт. Не превращай таблицу в карточки, пока столбцов мало и строка читается целиком.

.table-wrap { overflow-x: auto; }
th { text-align: left; }
td.num { text-align: right; }
tbody tr:nth-child(even) { background: #f6f3ee; }

Что проверить

• Шапка отличается от данных.
• На ширине 360px страница не разъезжается вбок.
• Числа одного столбца стоят друг под другом.