barre de défilement horizontale en haut et en bas du tableau

Question

J'ai un très grand table sur ma page. J'ai donc décidé de mettre une barre de défilement horizontale qui est placée en bas du tableau. Mais je voudrais que cette barre de défilement soit également placée en haut du tableau.

Ce que j'ai dans le modèle est le suivant :

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

Est-il possible de le faire uniquement en HTML et CSS ?

Answer 1

Pour simuler une deuxième barre de défilement horizontale au sommet d'un élément, mettez une "fausse" barre de défilement. div au-dessus de l'élément qui a un défilement horizontal, juste assez haut pour une barre de défilement. Attachez ensuite des gestionnaires de l'événement "scroll" à l'élément fictif et à l'élément réel, afin que l'autre élément soit synchronisé lorsque l'une des barres de défilement est déplacée. L'élément factice ressemblera à une deuxième barre de défilement horizontale au-dessus de l'élément réel.

Pour un exemple concret voir ce violon

Voici le code :

HTML :

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

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

JS :

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

Answer 2

Essayez d'utiliser le jquery.doubleScroll plugin

jQuery :

$(document).ready(function(){
  $('#double-scroll').doubleScroll();
});

CSS

#double-scroll{
  width: 400px;
}

HTML

<div id="double-scroll">
  <table id="very-wide-element">
    <tbody>
      <tr>
        <td></td>
      </tr>
    </tbody>
  </table>
</div>

Démo

Answer 3

Tout d'abord, excellente réponse @StanleyH Si quelqu'un se demande comment créer un conteneur à double défilement avec une largeur dynamique

css

.wrapper1, .wrapper2 { width: 100%; overflow-x: scroll; overflow-y: hidden; }
.wrapper1 { height: 20px; }
.div1 { height: 20px; }
.div2 { overflow: none; }

js

$(function () {
    $('.wrapper1').on('scroll', function (e) {
        $('.wrapper2').scrollLeft($('.wrapper1').scrollLeft());
    }); 
    $('.wrapper2').on('scroll', function (e) {
        $('.wrapper1').scrollLeft($('.wrapper2').scrollLeft());
    });
});
$(window).on('load', function (e) {
    $('.div1').width($('table').width());
    $('.div2').width($('table').width());
});

html

<div class="wrapper1">
    <div class="div1"></div>
</div>
<div class="wrapper2">
    <div class="div2">
        <table>
            <tbody>
                <tr>
                    <td>table cell</td>
                    <td>table cell</td>
                    <!-- ... -->
                    <td>table cell</td>
                    <td>table cell</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

Démonstration

http://jsfiddle.net/simo/67xSL/

Answer 4

Vous pouvez utiliser un plugin jquery qui fera le travail pour vous :

• https://github.com/avianey/jqDoubleScroll

Le plugin se chargera de toute la logique pour vous...

Answer 5

En me basant sur la solution de @StanleyH, j'ai créé une Directive AngularJS , démo sur jsFiddle .

Facile à utiliser :

<div data-double-scroll-bar-horizontal> {{content}} or static content </div>

Aucun jQuery n'est requis.