Гибкие таблицы на CSS Grid

[SelenIT3]

С display:contents, хотя я поначалу сам был в восторге от его возможностей, нужна очень большая осторожность: все нынешние реализации очень плохо сказываются на доступности. Из-за того, что из таблицы по сути удаляются промежуточные уровни иерархии, вертикальные связи между ячейками теряются напрочь и ходить по такой таблице клавиатурой становится нельзя. Это очень неприятный сюрприз для всех, кто вырос под лозунгом «HTML – это семантика, а CSS – просто оформление», но на сегодня это суровый факт. Наверное, было бы лучше вешать display:grid с grid-template-rows на TR-ки (например, через общий класс), и «подпереть» эту конструкцию нужными ARIA-ролями при необходимости...

Но за перевод в любом случае спасибо!

[Harrix]

Может я туплю, но где ссылка на вариант, который минимизируется штабелями при маленькой ширине экрана?

[noodles]

Всегда интересовало, зачем таблицы делать адаптивными? Ведь по логике табличные данные и их объём не предназначен для работы и анализа на маленьких дисплеях, как минимум — на мониторах, а лучше двух)

На практике, если действительно есть кейс для анализа каких-то данных с телефона, обычно непосредственно убеждаюсь и выясняю (не у пм-а, а у того кто будет этим пользоваться), что именно нужно анализировать на мобилке, какие данные показать, и как будет происходить работа. После чего, просто делаю отдельный компонент с этими данными, и на определённом брейкпоинте переключаю с таблицы на него. Но делать адаптивными таблицы… так себе удовольствие.

Для мазохистов пользователей, которым вдруг нужна полная таблица на мобилке, есть галочка в мобильных браузерах — «показать полную версию», и можно использовать pinch zoom чтоб рассматривать таблицу более подробно, как они привыкли на десктопе, ибо по памяти уже помнять что и где.

[thecoder]

Очень спорный вопрос, надо ли менять ширину колонок. Вообще в примере достаточно уродливая, непродуманная таблица. То, что она еще ездит по ширине, добавляет уродства.

Мне кажется в принципе сложно автоматически создавать "штабелирование", чтобы это выглядело приемлемо. В классической почте письма идут строчками, но в почте айфона превращаются в красивые двустрочные блоки. Сделать это автоматом, ничего не зная о данных, очень сложно. Автор копал вообще не в том направлении.

Нормальный вариант: горизонтальная прокрутка плотной, подогнанной на основе данных таблицы. Сколько есть окна — столько есть, а сама таблица остается большой и прокручивается в узком вертикальном пространстве. Если в окне только таблица, то вообще не заморачиваться и оставить горизонтальный скролл на странице, а если надо вписать в дизайн, то

overflow-x: auto;
-webkit-overflow-scrolling: touch;