JavaScript
HTML
ReactJS
Comments 26
0

Можно сделать проще: с помощью transform смещать ячейки на величину равную смещению скроллинга. Таким образом можно зафиксировать и верхнюю шапку и боковую.
http://mol.js.org/#demo=mol_grid

0

Чем проще то? В Вашем примере надо синхронизировать transform свойство, а в большинстве случаев синхронизируют scroll(Top/Left) свойство. Это в динамике — а вот в статике в примере разметка самая вроде "стандартная". Т.е. чем полезен пример — это возможно печать.

0
в большинстве случаев синхронизируют scroll(Top/Left) свойство

… и размеры строк/колонок.

0

Попробовал ваш пример "на печать" — можно смело присваивать ярлык еще одна кастомная неудача, только еще и с transform.

0

Очевидно при печати виртуальный скролл нужно отключать.

0

Так в таблице же больше строк, чем у вас поместилось на страницу.


В моем комментарии я имел в виду поддержку печати, что когда отправить страницу на печать, и там печатаются все данные, а не только видные в текущем скролле.


Соответственно, ваша реализация тоже так не может, как и любая другая, с кастомным скроллом.

+3
Не надо ради любого бога делать таблицу «свою», пользуйте стандартный функционал везде где возможно. При копировании таблицы в текстовый файл, что часто нужно для банальной отчетности, вся ваша кастомная таблица превращается в кашу из строк, которую приходится возвращать в нормальный вид руками.
+1

Статья как раз начинается с рассказа о нативных таблицах и их возможностях. А потом говорится, что нужно прибить шапку таблицы к верху экрана, чтобы при скролле не уезжала за пределы видимости. И уже потом начинается кастомизация разметки.


Тут уж либо удобнее для просмотра в браузере делать, либо дружелюбность к копированию, печати, и другим особым запросам.

0
Внезапно — шапку таблицы можно прибить вынесением ее в отдельную fixed-таблицу (: Тогда при копировании ее общие грани сливаются в одну.
0

Если вы повнимательнее почитаете статью, то заметите, что там так и сделано

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

При скролле вправо-влево шапка останется на месте, и подписи к колонкам будут показывать не на те данные. Именно это и решается в статье с помощью JS.


Кстати, а почему вы говорите, что у вас копирование не работает? Вы пробовали копировать текст из примера в статье? У меня весь текст копируется нормально.

0
Да, вы правы, скролл влево/вправо я пропустил, акцентировав свое внимание на вертикальной прокрутке.

У меня копирование работает, однако при вставке в ворд — все блоки выкладываются в список, а не в таблицу (https://volodalexey.github.io/front-end-notes/ вот этот пример?)
0

Так это из-за того, что в контенте таблицы были символы перевода строки "\n". Кастомная реализация тут не причем, так накосячить можно и с обычной таблицей

0
Не совсем. При копировании нативной таблицы в ворд/райтер — вставится как таблица, благо что редактор теперь это позволяет, с эмуляцией таблицы такое не пройдет, ибо при копировании в буфер обмена не уходят стили. Если вы сделаете блоки без переносов — будет каша текста в одну строку. Если будете ставить пробелы — будет разделенная пробелами строка, но таблицу вы из div и span не скопируете никак.
0

Я, кажется, вас понял.


Нужно, чтобы в разметке были только теги table и ничего лишнего. Тогда Word или другой аналогичный редактор распарсит контент и вставит его в правильном формате.


Попробую учесть этот сценарий в следующий раз, как буду делать таблицы.

0
Да (: Извините что не внятно выразил свои мысль изначально.
0

В статье был посыл в том, что, чем брать кастомную другую и килотонны JS кода, лучше сделать кастомную свою. Конечно стандартная разметка для того и сделана, чтобы быть стандартом. Но Вы уже точно опоздали, этих кастомных таблиц — тьма. Впечатление производит "динамика" — такова тенденция.

0
этих кастомных таблиц — тьма.

В то-то и дело, из-за чего для того чтобы из всего этого выбрать оптимальный вариант, проще сесть и написать свой с блекджеком и маффинами. Да и к слову, никто не запрещает повесить эвент на scroll и использовать transform правильно и по назначению, как-никак за окном 2017 год.
0

Я когда то хотел просто с шапкой так на сайте сделать. К сожалению в то время понял, что поддержки браузеров нет, что-то не могут видимо договориться. Сейчас смотрю ситуация улучшается.

0
Просто диву даешься. Верстка с , , и прочим уже давно канула в лету. Сегодня уже стандарт де-факто «верстка плавающими блоками» как минимум. Div-ы товарищи! Div-ы!
0
Ну да, зря они там в своих спецификациях придумали куча ненужных сущностей. input, button, table, ul, a (сотни их) и прочая семантика — ни к чему (где-то в мире при таких словах плачет В.Макеев). Div-ы товарищи! Div-ы!
Only those users with full accounts are able to leave comments. , please.