Comment créer des barres de défilement horizontales supérieure et inférieure synchronisées pour un tableau en utilisant uniquement HTML et CSS ?

Comment créer une barre de défilement horizontale en haut et en bas d'un tableau avec uniquement du HTML et du CSS

Problème :

Un utilisateur souhaite ajouter des barres de défilement horizontales en haut et en bas d'un grand tableau sans en utiliser JavaScript.

Solution :

Il est possible de simuler une deuxième barre de défilement horizontale en haut du tableau en utilisant CSS pour créer un div "factice" au-dessus du tableau qui a un défilement horizontal et une hauteur juste assez élevée pour une barre de défilement. Les gestionnaires d'événements pour l'événement "scroll" peuvent ensuite être attachés à l'élément factice et à la table réelle, synchronisant le défilement des deux éléments lorsque l'une ou l'autre des barres de défilement est déplacée.

Code Extrait :

HTML :

<div>
<p><strong>CSS :</strong></p>
<pre class="brush:php;toolbar:false">.wrapper1, .wrapper2 {
  width: 300px;
  overflow-x: scroll;
  overflow-y:hidden;
}

.wrapper1 {height: 20px; }
.wrapper2 {height: 200px; }

.div1 {
  width:1000px;
  height: 20px;
}

.div2 {
  width:1000px;
  height: 200px;
  background-color: #88FF88;
  overflow: auto;
}

JavaScript :

$(function(){
  $(".wrapper1").scroll(function(){
    $(".wrapper2").scrollLeft($(".wrapper1").scrollLeft());
  });
  $(".wrapper2").scroll(function(){
    $(".wrapper1").scrollLeft($(".wrapper2").scrollLeft());
  });
});

Le div factice (.div1) apparaîtra comme une deuxième barre de défilement horizontale au-dessus de l'élément de tableau réel (.div2). En synchronisant le défilement des deux éléments, l'utilisateur peut faire défiler le contenu du tableau depuis la barre de défilement supérieure ou inférieure.