Hummerson
@Hummerson

Как сверстать такую таблицу? table или div?

Всем приветы. Подскажите пожалуйста, как сверстать такую табличку? Через бутстрап table или дивами?
Нужно еще сделать так, чтобы из базы данных туда строчка вставала
Оух, чет я вообще запутался :c

5a7a9404a89a7803666660.jpeg
  • Вопрос задан
  • 2269 просмотров
Пригласить эксперта
Ответы на вопрос 4
@BelkinVadim
Frontend разработчик
Из-за особенностей дизайна проблематично сделать через стандартное табличное поведение (добавить тени и отступы между строками т.к. элементы с display: table-row не дают такой возможности).
Но в данном случае, если важна семантика и доступность (Web Accessibility), я бы все же использовал table и сопутствующие теги, изменив у них свойства display на block и flex где нужна блочная или горизонтальная раскладка (это позволит добавить тени для tr и отступы между ними).
Естественно все можно сделать так же на div и даже добавить role и aria-* атрибуты если опять же важна доступность.

В любом случае выбор решения зависит от требований к реализации (поведение строк и колонок при изменении контента и изменениях размера таблицы или экрана, необходимость соблюдения семантики и доступности, возможно еще какие-то особенности).
Если у вас достаточно времени для реализации данного UI, то я бы посоветовал попробовать сделать на таблицах, а если будут сложности - всегда можно переделать на блоки.
Ответ написан
Комментировать
zorro76
@zorro76
Можете еще поиграться с data-table
Ответ написан
Комментировать
@astrodeep
flexbox))
Ответ написан
Комментировать
Justique
@Justique
Как написали выше, не делайте велосипед, на flexbox это делается за час
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы