Création d’un défilement fixe bidirectionnel des en-têtes de tableau

J’ai un énorme tableau contenant des données dans les directions verticales et horizontales …

Comme ça: jsfiddle

J’espère que la colonne la plus à gauche et la rangée du haut seront fixées de manière à ce que, lorsque je fais défiler dans les deux sens, je puisse garder ces deux colonnes (colonne et rangée) en place. Mais ne déplacez que le contenu.

Comment y parvenir avec JS / CSS?

Je suppose qu’une solution de css pure ne le fera pas, car il y a un défilement bidirectionnel.

someclass { position: fixed }

Le code complet nécessaire pour répondre à votre question est trop volumineux pour être inclus ici. Au lieu de cela, je vous lierai au JSBin qui contient la réponse et n’inclue que le style et le javascript.

Les mises en garde sont les suivantes:

Si vous êtes prêt à utiliser des tableaux au lieu de div pour afficher vos données, vous aurez du mal à mettre en forme la réponse que je vous ai donnée, en particulier si les données dans les cellules ont des largeurs et des hauteurs différentes.
- Pour ce faire, vous devez parcourir chaque en-tête de ligne et de colonne, puis définir leurs largeurs et hauteurs respectives au maximum entre leurs largeurs / hauteurs et les largeurs / hauteurs des rangées du tableau. La raison pour laquelle leurs largeurs et leurs hauteurs ne sont pas automatiquement définies par rapport au rest des cellules du tableau est due au fait que lors de la définition de leur position: fixed atsortingbut de style position: fixed , vous les sortez du tableau.
  - Par conséquent, si vous avez le pouvoir, envisagez d’utiliser des divs et de diviser les en-têtes de ligne en un div séparé que vous pouvez position: fixed et émulez le comportement actuel des en-têtes de colonne .
  - Un autre avantage est que vos performances augmenteront, car jQuery ne sera pas itératif à travers chaque ligne pour ajuster les en-têtes de ligne à chaque fois que vous faites défiler.
Vous devez utiliser l’ interface utilisateur jQuery .

HTML:

   ...  Dead Cell

CSS:

 /* Make white space above table since we broke the column headers out of the table */ table { margin-top: 51px; position: relative; } table td { border: 1px solid #FFCC00; height: 44px; background-color: #FFFFCC; } /* styling for column headers */ table tr:first-child { position: fixed; top: 0; left: 57px; z-index: 100; } /* remove first cell in top left position */ table tr:first-child td:first-child { display: none; } table tr:first-child td, table tr { position: relative; } table tr:first-child td { background: orange; } table tr td:first-child { background: orange; position: fixed; width: 39px } /* Make white space to the left of table since we broke the row headers out of the table */ table tr:nth-child(n+2) td:nth-child(2) { margin-left: 48px; display: block; }

JS:

 $(function(){ // When document is loaded and ready $(window).scroll(function() { // When we scroll in the window // Move column headers into place $('table tr:first-child td').css('left', - $(this).scrollLeft()); // Move row headers into place $('table tr td:first-child').each(function() { $(this).position({ // jQuery UI overloaded function my: "left top", at: "left top", of: $(this).parent(), using: function(pos) { $(this).css('top', pos.top); } }); }); }); });

Encore une fois, voici le lien vers le JSBin .