Таблицы с фиксированным заголовком, современное состояние

Question

Это постоянный вопрос с тех пор, как, например, навсегда: как сохранить заголовки зафиксированными сверху при прокрутке таблицы вниз?

Да, я знаю, что сеть не предназначена для отображения длинных таблиц, подобных таблицам, но когда клиент запрашивает что-то подобное (потому что он или она привыкли к этим старым документам Excel...), у вас нет выбора, кроме как соблюдать,

Это суммирует основные проблемы и попытки их решения с фиксацией заголовков таблицы:

1. <thead> элемент может быть относительно позиционирован, но он не сдвинется с места;
2. с position: absolute или же fixed, голова "отсоединена" от остальной части таблицы, и ширина столбцов больше не совпадает; более того, вам нужно зарезервировать место над телом таблицы;
3. это можно решить, используя другую таблицу только для заголовков, оставив тело в другом, но это не решит проблему разной ширины столбцов;
4. Вы можете установить столбцы с фиксированной шириной, но это не всегда применимо в зависимости от ваших потребностей - например, в случае динамического или неизвестного контента;
5. Javascript может регулировать ширину столбцов, но доступ к таким свойствам, как offsetWidth вызывает перекомпоновку, что является довольно сложной задачей даже для таких браузеров, как Chrome или Firefox, и добавляет раздражающую задержку рендеринга даже с небольшими таблицами, но с динамическим содержимым;
6. вы можете создать копию таблицы, используя первую для отображения заголовков, а другую для отображения тела, но это делает DOM в два раза тяжелее и должен полагаться на Javascript для копирования изменений содержимого;
7. с помощью <div> с display: table-whatever на самом деле ничего не решит, и лишает вас возможности добавить rowspan с и colspan s.

Возможно, мы сможем попробовать что-то новое с помощью новейших веб-технологий. Я экспериментировал с решением transform: translate который ведет себя приемлемо хорошо ( см. здесь), и сохраняет пространство над телом таблицы, а ширина столбцов по-прежнему совпадает.

Это, конечно, не будет работать в IE8 и ниже. Но он отлично работает в Chrome, Safari и Firefox. Он не работает в Opera 12.x и ниже, но работает в Opera 15 благодаря своему новому движку рендеринга Blink. Я заметил, что это работает лучше или, по крайней мере, с translate чем с translate3d: он показывает немного меньше мерцания.

К сожалению, это не работает в IE9 и IE10, и заголовки остаются на своих местах. Это действительно позор, так как нет способа обнаружить это поведение (о котором я знаю).

Итак, каковы ваши самые последние решения этой проблемы? Я ищу CSS и чистые решения Javascript.

Answer 1

Недавно мне пришлось сделать именно эту вещь для клиента, и оказалось, что это почти невозможно. Я нашел действительно хорошую библиотеку под названием SlickGrid, однако, когда дело дошло до ее перевода на мобильные устройства, она просто не работала (производительность была слишком большой проблемой). Если вы не беспокоитесь о мобильном телефоне, тогда я определенно рекомендую проверить его. https://github.com/mleibman/SlickGrid