Комментарии 26
Можно сделать проще: с помощью transform смещать ячейки на величину равную смещению скроллинга. Таким образом можно зафиксировать и верхнюю шапку и боковую.
http://mol.js.org/#demo=mol_grid
Чем проще то? В Вашем примере надо синхронизировать transform свойство, а в большинстве случаев синхронизируют scroll(Top/Left)
свойство. Это в динамике — а вот в статике в примере разметка самая вроде "стандартная". Т.е. чем полезен пример — это возможно печать.
в большинстве случаев синхронизируют scroll(Top/Left) свойство
… и размеры строк/колонок.
Попробовал ваш пример "на печать" — можно смело присваивать ярлык еще одна кастомная неудача
, только еще и с transform
.
Что не так?
Если проскроллить и потом отправить на печать — то ломается.
Так в таблице же больше строк, чем у вас поместилось на страницу.
В моем комментарии я имел в виду поддержку печати, что когда отправить страницу на печать, и там печатаются все данные, а не только видные в текущем скролле.
Соответственно, ваша реализация тоже так не может, как и любая другая, с кастомным скроллом.
Статья как раз начинается с рассказа о нативных таблицах и их возможностях. А потом говорится, что нужно прибить шапку таблицы к верху экрана, чтобы при скролле не уезжала за пределы видимости. И уже потом начинается кастомизация разметки.
Тут уж либо удобнее для просмотра в браузере делать, либо дружелюбность к копированию, печати, и другим особым запросам.
Либо и то и другое, как я описал выше :-)
Если вы повнимательнее почитаете статью, то заметите, что там так и сделано
При скролле вправо-влево шапка останется на месте, и подписи к колонкам будут показывать не на те данные. Именно это и решается в статье с помощью JS.
Кстати, а почему вы говорите, что у вас копирование не работает? Вы пробовали копировать текст из примера в статье? У меня весь текст копируется нормально.
У меня копирование работает, однако при вставке в ворд — все блоки выкладываются в список, а не в таблицу (https://volodalexey.github.io/front-end-notes/ вот этот пример?)
Так это из-за того, что в контенте таблицы были символы перевода строки "\n". Кастомная реализация тут не причем, так накосячить можно и с обычной таблицей
Я, кажется, вас понял.
Нужно, чтобы в разметке были только теги table и ничего лишнего. Тогда Word или другой аналогичный редактор распарсит контент и вставит его в правильном формате.
Попробую учесть этот сценарий в следующий раз, как буду делать таблицы.
В статье был посыл в том, что, чем брать кастомную другую и килотонны JS кода, лучше сделать кастомную свою. Конечно стандартная разметка для того и сделана, чтобы быть стандартом. Но Вы уже точно опоздали, этих кастомных таблиц — тьма. Впечатление производит "динамика" — такова тенденция.
этих кастомных таблиц — тьма.
В то-то и дело, из-за чего для того чтобы из всего этого выбрать оптимальный вариант, проще сесть и написать свой с блекджеком и маффинами. Да и к слову, никто не запрещает повесить эвент на scroll и использовать transform правильно и по назначению, как-никак за окном 2017 год.
Хотя спецификация не предусматривает работу с табличными элементами, в Хроме 56+ работает.
Таблицы! Таблицы? Таблицы…