Как сделать скрол для таблицы?

Question

[js_web]

Есть таблица https://jsfiddle.net/provgzu3/
Если ей не хватает места, то появляется скролл.

Вопрос: Как сделать так, что бы верхнего скрола не было видно, при этом, если мы двигаем нижний скрол, шапка тоже должна смещаться.

так же есть таблица на table, но там есть косяк с скроллом https://jsfiddle.net/ray4ev18/
Скролл должен быть только в части контента, а сейчас он глобальный.
Подскажите плиз как сделать так, что бы шапка была фиксированная и скрол был только в части контента, т.е. не заползал за шапку как на втором примере.

Comments

[Дархан]

Приходит в голову только привязать движение нижнего скрола к верхнему через js

[Ankhena]

Верстайте таблички с помощью table (он именно для этого и предназначен), будет скроллиться все как надо.

[js_web]

Ankhena, первая мысль была такая, но там есть проблема с расположением скрола:
https://jsfiddle.net/ray4ev18/

Нужно что бы он был только в контенте и шапка не была затронута.
Не знаете как лучше сделать?

[Ankhena]

js_web,
Тогда только js
Настоящие скроллы убрать, сделать кастомный из двух div (полоска + кружок или маленькая полоска), положение маленького регулируется через js в зависимости от прокрутки. Конструкцию абсолютно спозиционировать куда нужно.

Answer 1

[js_web]

Вопрос решен, сделал сам, кому интересно:

https://jsfiddle.net/tnm28fgo/1/

Comments

[Виталий Першин]

Почему бы не использовать единую обертку? проблема решается без js

[js_web]

Виталий, Тогда у нас пропадает фиксация шапки:

https://jsfiddle.net/provgzu3/13/

B скрол заходит за пределы шапки, а он должен быть только в рамках контента (по дизайну)

[Ankhena]

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

[js_web]

Ankhena, нужно как у них: https://demos.telerik.com/kendo-ui/grid/endless-sc...
Но я примерно понял, скорей всего тут нужна вторая таблица (одна для шапки, вторая для строчек))

Других вариантов я не вижу, уже все перепробовал

flexbox тоже не подходит, потому что он не может работать как таблица

[Ankhena]

js_web, там тоже скролл внизу таблицы и прокручивается она вся.
А для этого нужен внешний div (у него как раз прокрутка) и 1 table

[Ankhena]

js_web, Как сделать горизонтальный скролл на таблице?