volodalexey Jun 26 2017 at 18:34

Таблицы! Таблицы? Таблицы…

Easy

16 min

55K

JavaScript*HTML*ReactJS*

+14

Comments 26

vintage Jun 26 2017 at 23:23

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

volodalexey Jun 27 2017 at 08:41

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

vintage Jun 27 2017 at 08:50

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

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

volodalexey Jun 27 2017 at 08:57

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

vintage Jun 27 2017 at 10:19

Что не так?

volodalexey Jun 27 2017 at 10:36

Если проскроллить и потом отправить на печать — то ломается.

vintage Jun 27 2017 at 13:08

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

justboris Jun 27 2017 at 10:37

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

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

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

daggert Jun 27 2017 at 01:38

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

justboris Jun 27 2017 at 02:29

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

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

vintage Jun 27 2017 at 06:42

Либо и то и другое, как я описал выше :-)

daggert Jun 27 2017 at 11:49

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

justboris Jun 27 2017 at 11:56

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

daggert Jun 27 2017 at 12:23

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

justboris Jun 27 2017 at 12:54

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

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

daggert Jun 27 2017 at 13:09

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

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

justboris Jun 27 2017 at 15:34

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

daggert Jun 27 2017 at 15:44

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

justboris Jun 27 2017 at 15:48

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

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

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

daggert Jun 27 2017 at 23:46

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

volodalexey Jun 27 2017 at 08:47

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

kursoriks Jun 27 2017 at 10:37

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

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

clemencov Jun 27 2017 at 13:15

Еще position: sticky можно использовать: https://codepen.io/clemencov/pen/mwqwpd, поддержка: http://caniuse.com/#search=sticky.

Хотя спецификация не предусматривает работу с табличными элементами, в Хроме 56+ работает.

volodalexey Jun 27 2017 at 13:41

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

jankovsky Jun 27 2017 at 15:46

Просто диву даешься. Верстка с , , и прочим уже давно канула в лету. Сегодня уже стандарт де-факто «верстка плавающими блоками» как минимум. Div-ы товарищи! Div-ы!

freetitelu Jun 27 2017 at 18:46

Ну да, зря они там в своих спецификациях придумали куча ненужных сущностей. input, button, table, ul, a (сотни их) и прочая семантика — ни к чему (где-то в мире при таких словах плачет В.Макеев). Div-ы товарищи! Div-ы!

Show the best of all time