Comment créer des barres de défilement horizontales en haut et en bas d'un tableau en HTML et CSS ?

Comment placer des barres de défilement horizontales en haut et en bas d'un tableau en HTML et CSS

Pour répondre au besoin d'une barre de défilement horizontale en haut et en bas d'un grand tableau, cela n'est pas directement possible en utilisant uniquement HTML et CSS. Il existe cependant une solution de contournement efficace pour simuler la présence de deux barres de défilement.

L'astuce consiste à positionner un div "factice" au-dessus de la table, en lui accordant une hauteur juste suffisante pour accueillir une barre de défilement horizontale. Ce div factice servira de "seconde" barre de défilement.

Pour maintenir la synchronisation entre le div factice et la table réelle, des gestionnaires d'événements sont attachés aux deux éléments. Chaque fois que la barre de défilement de l'un des éléments est déplacée, l'autre élément est mis à jour en conséquence, garantissant que les deux barres de défilement restent synchronisées.

Pour une démonstration interactive, reportez-vous au violon fourni :

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

<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>

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

En employant cette technique, vous pouvez imiter efficacement la présence de barres de défilement horizontales en haut et en bas de votre tableau, permettant ainsi une navigation pratique pour vos utilisateurs.

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!