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

Question

У меня на странице очень большой table. Поэтому я решил поставить горизонтальную полосу прокрутки в нижней части таблицы. Но я бы хотел, чтобы эта полоса прокрутки была также сверху на столе.

Что у меня есть в шаблоне это:

<div style="overflow:auto; width:100%; height:130%">
<table id="data" style="width:100%">

Это возможно сделать только в HTML и CSS?

Answer 1

Насколько я знаю, это невозможно с HTML и CSS.

Answer 2

для всех поклонников angular / nativeJs, реализующих ответ @ simo

HTML (без изменений)

<div class="top-scroll-wrapper">
    <div class="top-scroll"></div>
</div>

CSS (без изменений, ширина: 90% - это мой дизайн)

.top-scroll-wrapper { width: 90%;height: 20px;margin: auto;padding: 0 16px;overflow-x: auto;overflow-y: hidden;}
.top-scroll { height: 20px; }

JS (например, onload) или ngAfterViewChecked (все as предназначены для TypeScript)

let $topscroll = document.querySelector(".top-scroll") as HTMLElement
let $topscrollWrapper = document.querySelector(".top-scroll-wrapper") as HTMLElement
let $table = document.querySelectorAll('mat-card')[3] as HTMLElement

$topscroll.style.width = totalWidth + 'px'
$topscrollWrapper.onscroll = e => $table.scroll((e.target as HTMLElement).scrollLeft, 0)
$table.onscroll = e => $topscrollWrapper.scroll((e.target as HTMLElement).scrollLeft, 0)

Answer 3

решение только для javascript, основанное на ответах @HoldOffHunger и @bobince

<div id="doublescroll">

.

function DoubleScroll(element) {
            var scrollbar= document.createElement('div');
            scrollbar.appendChild(document.createElement('div'));
            scrollbar.style.overflow= 'auto';
            scrollbar.style.overflowY= 'hidden';
            scrollbar.firstChild.style.width= element.scrollWidth+'px';
            scrollbar.firstChild.style.paddingTop= '1px';
            scrollbar.firstChild.appendChild(document.createTextNode('\xA0'));
            var running = false;
            scrollbar.onscroll= function() {
                if(running) {
                    running = false;
                    return;
                }
                running = true;
                element.scrollLeft= scrollbar.scrollLeft;
            };
            element.onscroll= function() {
                if(running) {
                    running = false;
                    return;
                }
                running = true;
                scrollbar.scrollLeft= element.scrollLeft;
            };
            element.parentNode.insertBefore(scrollbar, element);
        }

    DoubleScroll(document.getElementById('doublescroll'));

Answer 4

Проблема с направлением прокрутки: rtl. Кажется, плагин не поддерживает его правильно. Вот скрипка: скрипка

Обратите внимание, что в Chrome он работает правильно, но во всех других популярных браузерах направление верхней полосы прокрутки остается левым.

Answer 5

Если вы используете iscroll.js в веб-браузере или мобильном браузере, вы можете попробовать:

$('#pageWrapper>div:last-child').css('top', "0px");