Два элемента с общей родительской прокруткой и липкими заголовками ⇐ CSS

[Anonymous]

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

Код: Выделить всё

Sticky Table Header

Sticky Group Header #1
Row
Row
Row
Row
Row
Row


Sticky Group Header #2
Row
Row
Row
Row
Row
Row

< /code>
< /div>
< /div>
< /p>
Если я помещаю две таблицы в родительский контейнер, я не могу сделать слишком маленькие размеры каждой таблицы, потому что тогда каждый из них получит свой собственный прокрутка - и я хочу, чтобы все это было сближением на y -осе.  class = "Snippet-Code">




Sticky Table Header

Sticky Group Header #1
Row
Row
Row
Row
Row
Row


Sticky Group Header #2
Row
Row
Row
Row
Row
Row




Sticky Gantt Header

Sticky Group Header #1
Row
Row
Row
Row
Row
Row


Sticky Group Header #2
Row
Row
Row
Row
Row
Row


< /code>
< /div>
< /div>
< /p>
В этом случае, однако, липкий не работает, как и ожидалось, потому что высота таблицы не ограничена, и поэтому никакой фактической прокрутки не происходит внутри самой таблицы.  Однако, таким образом, я не могу прокрутить два элемента вместе как один.



Sticky Table Header

Sticky Group Header #1
Row
Row
Row
Row
Row
Row


Sticky Group Header #2
Row
Row
Row
Row
Row
Row




Sticky Gantt Header

Sticky Group Header #1
Row
Row
Row
Row
Row
Row


Sticky Group Header #2
Row
Row
Row
Row
Row
Row

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

Подробнее здесь: https://stackoverflow.com/questions/797 ... ky-headers