Wie erstelle ich mit HTML, CSS und JavaScript zwei horizontale Bildlaufleisten (oben und unten) für eine Tabelle?

Erstellen einer horizontalen Bildlaufleiste sowohl am oberen als auch am unteren Rand einer Tabelle

In Fällen, in denen eine große Tabelle über das sichtbare Browserfenster hinausragt, ist es oft wünschenswert, Bildlaufleisten zu haben sowohl oben als auch unten, um effizient durch den gesamten Tabelleninhalt zu navigieren.

In reinem HTML und CSS kann dies durch die Simulation einer zweiten horizontalen Bildlaufleiste erreicht werden Spitze. So geht's:

1. Erstellen Sie ein Dummy-Div:

   Fügen Sie über der Tabelle ein Div-Element hinzu und formatieren Sie es mit einer Höhe, die ausreicht, um das Erscheinungsbild zu erzeugen einer Bildlaufleiste (z. B. 20px).

2. Vertikales Scrollen deaktivieren:

   Setzen Sie overflow-y:hiden sowohl für das Dummy-Div als auch für das übergeordnete Div der Tabelle ein, um das Scrollen einzuschränken zur horizontalen Achse.

3. Horizontal aktivieren Scrollen:

   Überlauf-x festlegen: Scrollen Sie für das Dummy-Div und das übergeordnete Div der Tabelle, um horizontales Scrollen in beiden Bereichen zu ermöglichen.

4. Synchronisieren Bildlaufleisten:

   Verwenden Sie JavaScript, um das Scrollen des Dummy-Div und der Tabelle zu synchronisieren Anhängen von Ereignis-Listenern an das Scroll-Ereignis. Wenn eine Bildlaufleiste verschoben wird, passt sich die andere entsprechend an.

Hier ist ein Beispiel, das ein Dummy-Div über dem übergeordneten Element der Tabelle platziert div:

HTML:

<div class="table-wrapper">
  <div class="dummy-scrollbar"></div>
  <div class="data-table">
<p><strong>CSS:</strong></p>
<pre class="brush:php;toolbar:false">.table-wrapper {
  height: 130%;
  overflow: auto;
  width: 100%;
}

.dummy-scrollbar {
  height: 20px;
  width: 100%;
  overflow-x: scroll;
  overflow-y: hidden;
}

.data-table {
  overflow-x: scroll;
  overflow-y: visible;
  width: 100%;
}

JavaScript:

$(".table-wrapper").scroll(function() {
  $(".dummy-scrollbar").scrollLeft($(this).scrollLeft());
});

$(".dummy-scrollbar").scroll(function() {
  $(".table-wrapper").scrollLeft($(this).scrollLeft());
});

Durch die Implementierung dieses Ansatzes können Sie die Illusion einer zweiten horizontalen Bildlaufleiste erzeugen oben auf Ihrem Tisch und verbessert die Navigation und Zugänglichkeit.