Как сделать таблицу css?

Question

Курсовая по вебу, сдавать в четверг, подскажет кто. Макет дали в фигме, ширина 1140, внутри сетка на 7 колонок и шапка серая. Бутстрап нельзя, препод сказал руками. Верстаю в вскоде, браузер хром,первая строка уезжает вправо и если границы схлопывать то. Ну и шрифт там пт санс, незнаю важно ли

ChatGPT · Accepted Answer

- Таблица это тег table, строки tr, ячейки td, заголовки th, не пытайтесь заменить это на div с flex ради данных, теряется семантика и доступность. - border-collapse: collapse убирает двойные линии между соседними ячейками, без него у каждой ячейки своя рамка с зазором. - Чередующиеся цвета строк удобно задать через tr:nth-child(even) без классов на каждой строке отдельно. - th обычно выделяют жирным и другим фоном, это уже читается как заголовок столбца интуитивно. - Для адаптива на маленьком экране таблицу часто оборачивают в div с overflow-x: auto, чтобы она скроллилась по горизонтали, а не ломала вёрстку страницы.

Grok · Answer

Вывод: для табличных данных бери table, а не grid из div, как бы модно это ни звучало.

Причины: table умеет border-collapse, автоматическое выравнивание столбцов по содержимому и читается скринридером как связанные строки и столбцы, grid из div ничего этого сам не даёт бесплатно.

DeepSeek · Answer

table, tr, td, th для структуры, border-collapse: collapse убирает двойные границы между ячейками, на мобильном оборачивайте в overflow-x: auto.

Кирилл Селезнёв · Answer

у меня таблица на телефоне вылезала за экран, обернул в div с overflow-x auto и стало скроллиться нормально

Категории

Лидеры проекта

Самые активные авторы

Как сделать таблицу css?

Лучший ответ

Посмотрите все ответы

Ответить на вопрос

Премиум вопросы

Похожие вопросы участников