Comment puis-je créer une barre de défilement horizontale en double en haut d’un tableau ?

Barre de défilement horizontale en double en haut et en bas d'un tableau

La création d'une barre de défilement horizontale en bas d'un tableau est une exigence courante pour les tableaux avec une largeur excessive. Cependant, répliquer la barre de défilement en haut nécessite une approche plus innovante.

Pour simuler une deuxième barre de défilement horizontale en haut, la solution consiste à créer un div « factice » au-dessus du tableau d'origine. Ce div factice a une barre de défilement horizontale et est dimensionné précisément pour imiter la largeur de la barre de défilement d'origine.

Ensuite, les gestionnaires d'événements sont attachés à la fois au div factice et à la table d'origine pour synchroniser leur comportement de défilement. Chaque fois que l'une des barres de défilement est déplacée, l'autre est mise à jour pour maintenir l'alignement. L'effet est une deuxième barre de défilement horizontale en haut du tableau.

Le code suivant illustre cette technique :

HTML :

<code class="html"><div class="wrapper1">
  <div class="div1"></div>
</div>
<div class="wrapper2">
  <div class="div2">
    <!-- Content Here -->
  </div>
</div></code>

CSS :

<code class="css">.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;
}</code>

JavaScript :

<code class="javascript">$(function(){
  $(".wrapper1").scroll(function(){
    $(".wrapper2").scrollLeft($(".wrapper1").scrollLeft());
  });
  $(".wrapper2").scroll(function(){
    $(".wrapper1").scrollLeft($(".wrapper2").scrollLeft());
  });
});</code>

En incorporant cette technique, les développeurs peuvent créer efficacement une barre de défilement horizontale en double en haut d'un tableau en utilisant uniquement HTML, CSS et JavaScript.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!