Table HTML avec en-têtes fixes?

Question

Existe-t-il une technique CSS/JavaScript impliquant plusieurs navigateurs pour afficher un long tableau HTML de sorte que les en-têtes de colonne restent fixes à l'écran et ne défilent pas avec le corps du tableau Pensez à l'effet "geler les volets" dans Microsoft Excel.

Je veux pouvoir faire défiler le contenu du tableau, mais toujours pouvoir voir les en-têtes de colonne en haut.

Mahes · Accepted Answer

Pendant quelque temps, je cherchais une solution à ce problème. La plupart des réponses ne fonctionnaient pas ou ne convenaient pas à ma situation. J'ai donc écrit une solution simple avec jQuery.

Voici le contour de la solution:

Clonez la table qui doit avoir un en-tête fixe et placez la copie clonée Par-dessus l'original.
Retirez le corps de la table de la table supérieure.
Supprimez l'en-tête de la table inférieure.
Ajustez les largeurs de colonne. (Nous gardons une trace de la largeur originale des colonnes)

Vous trouverez ci-dessous le code d’une démo exécutable.

function scrolify(tblAsJQueryObject, height) { var oTbl = tblAsJQueryObject; // for very large tables you can remove the four lines below // and wrap the table with <div> in the mark-up and assign // height and overflow property var oTblDiv = $("<div/>"); oTblDiv.css('height', height); oTblDiv.css('overflow', 'scroll'); oTbl.wrap(oTblDiv); // save original width oTbl.attr("data-item-original-width", oTbl.width()); oTbl.find('thead tr td').each(function() { $(this).attr("data-item-original-width", $(this).width()); }); oTbl.find('tbody tr:eq(0) td').each(function() { $(this).attr("data-item-original-width", $(this).width()); }); // clone the original table var newTbl = oTbl.clone(); // remove table header from original table oTbl.find('thead tr').remove(); // remove table body from new table newTbl.find('tbody tr').remove(); oTbl.parent().parent().prepend(newTbl); newTbl.wrap("<div/>"); // replace ORIGINAL COLUMN width newTbl.width(newTbl.attr('data-item-original-width')); newTbl.find('thead tr td').each(function() { $(this).width($(this).attr("data-item-original-width")); }); oTbl.width(oTbl.attr('data-item-original-width')); oTbl.find('tbody tr:eq(0) td').each(function() { $(this).width($(this).attr("data-item-original-width")); }); } $(document).ready(function() { scrolify($('#tblNeedsScrolling'), 160); // 160 is height });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script> <div style="width:300px;border:6px green solid;"> <table border="1" width="100%" id="tblNeedsScrolling"> <thead> <tr><th>Header 1</th><th>Header 2</th></tr> </thead> <tbody> <tr><td>row 1, cell 1</td><td>row 1, cell 2</td></tr> <tr><td>row 2, cell 1</td><td>row 2, cell 2</td></tr> <tr><td>row 3, cell 1</td><td>row 3, cell 2</td></tr> <tr><td>row 4, cell 1</td><td>row 4, cell 2</td></tr> <tr><td>row 5, cell 1</td><td>row 5, cell 2</td></tr> <tr><td>row 6, cell 1</td><td>row 6, cell 2</td></tr> <tr><td>row 7, cell 1</td><td>row 7, cell 2</td></tr> <tr><td>row 8, cell 1</td><td>row 8, cell 2</td></tr> </tbody> </table> </div>

Cette solution fonctionne dans Chrome et IE. Comme il est basé sur jQuery, cela devrait également fonctionner dans les autres navigateurs pris en charge par jQuery.

Maximilian Hils · Answer

Cela peut être résolu en quatre lignes de code.

Si vous ne vous souciez que des navigateurs modernes, un en-tête fixe peut être réalisé beaucoup plus facilement en utilisant des transformations CSS. Cela semble étrange, mais fonctionne très bien:

HTML et CSS restent tels quels.
Aucune dépendance JavaScript externe.
Quatre lignes de code.
Fonctionne pour toutes les configurations (disposition de la table: corrigée, etc.).

document.getElementById("wrap").addEventListener("scroll", function(){ var translate = "translate(0,"+this.scrollTop+"px)"; this.querySelector("thead").style.transform = translate; });

La prise en charge des transformations CSS est largement disponible sauf pour Internet Explorer 8-.

Voici l'exemple complet pour référence:

document.getElementById("wrap").addEventListener("scroll",function(){ var translate = "translate(0,"+this.scrollTop+"px)"; this.querySelector("thead").style.transform = translate; });

/* Your existing container */ #wrap { overflow: auto; height: 400px; } /* CSS for demo */ td { background-color: green; width: 200px; height: 100px; }

<div id="wrap"> <table> <thead> <tr> <th>Foo</th> <th>Bar</th> </tr> </thead> <tbody> <tr><td></td><td></td></tr> <tr><td></td><td></td></tr> <tr><td></td><td></td></tr> <tr><td></td><td></td></tr> <tr><td></td><td></td></tr> <tr><td></td><td></td></tr> <tr><td></td><td></td></tr> <tr><td></td><td></td></tr> <tr><td></td><td></td></tr> <tr><td></td><td></td></tr> <tr><td></td><td></td></tr> <tr><td></td><td></td></tr> </tbody> </table> </div>

Mark · Answer

Je viens juste de terminer la création d'un plugin jQuery qui prendra un seul tableau valide en utilisant du HTML valide (doit avoir un thead et un tbody) et produira un tableau avec des en-têtes fixes, un pied de page fixe optionnel pouvant être un en-tête cloné ou tout autre élément. contenu que vous avez choisi (pagination, etc.). Si vous souhaitez utiliser des moniteurs plus volumineux, le tableau sera également redimensionné lorsque le navigateur est redimensionné. Une autre fonctionnalité ajoutée est la possibilité de faire défiler l'écran latéralement si les colonnes du tableau ne peuvent pas toutes être affichées.

http://fixedheadertable.com/

sur github: http://markmalek.github.com/Fixed-Header-Table/

Il est extrêmement facile à configurer et vous pouvez créer vos propres styles personnalisés. Il utilise également des angles arrondis dans tous les navigateurs. N'oubliez pas que je viens de le publier, il est donc techniquement toujours en version bêta et je résous très peu de problèmes mineurs.

Cela fonctionne dans Internet Explorer 7, Internet Explorer 8, Safari, Firefox et Chrome.

mkoryak · Answer

J'ai également créé un plugin qui résout ce problème. Mon projet - jQuery.floatThead existe depuis plus de 4 ans maintenant et est très mature.

Il ne nécessite aucun style externe et n'attend pas que votre table soit stylée de manière particulière. Il supporte Internet Explorer9 + et Firefox/Chrome.

Actuellement (2018-05) il a:

405 commits et 998 étoiles sur GitHub

Beaucoup (pas toutes) les réponses ici sont des hacks rapides qui ont peut-être résolu le problème qu'une personne avait, mais ne fonctionneront pas pour toutes les tables.

Certains des autres plugins sont anciens et fonctionnent probablement très bien avec Internet Explorer, mais ils tomberont sous Firefox et Chrome.

Jonas Schubert Erlandsson · Answer

TL; DR

Si vous ciblez les navigateurs modernes et que vous n'avez pas besoin de style extravagant: http://jsfiddle.net/dPixie/byB9d/3/ ... Bien que la la version big four soit assez jolie aussi la version gère beaucoup mieux la largeur du fluide.

Bonnes nouvelles tout le monde!

Avec les avancées de HTML5 et CSS3, cela est maintenant possible, du moins pour les navigateurs modernes. L’implémentation un peu furtive que j’ai trouvée peut être trouvée ici: http://jsfiddle.net/dPixie/byB9d/3/ . Je l'ai testé sous FX 25, Chrome 31 et IE 10 ...

HTML pertinent (insérez toutefois un doctype HTML5 dans la partie supérieure de votre document):

<section class="positioned"> <div class="container"> <table> <thead> <tr class="header"> <th> Table attribute name <div>Table attribute name</div> </th> <th> Value <div>Value</div> </th> <th> Description <div>Description</div> </th> </tr> </thead> <tbody> <tr> <td>align</td> <td>left, center, right</td> <td>Not supported in HTML5. Deprecated in HTML 4.01. Specifies the alignment of a table according to surrounding text</td> </tr> <tr> <td>bgcolor</td> <td>rgb(x,x,x), #xxxxxx, colorname</td> <td>Not supported in HTML5. Deprecated in HTML 4.01. Specifies the background color for a table</td> </tr> <tr> <td>border</td> <td>1,""</td> <td>Specifies whether the table cells should have borders or not</td> </tr> <tr> <td>cellpadding</td> <td>pixels</td> <td>Not supported in HTML5. Specifies the space between the cell wall and the cell content</td> </tr> <tr> <td>cellspacing</td> <td>pixels</td> <td>Not supported in HTML5. Specifies the space between cells</td> </tr> <tr> <td>frame</td> <td>void, above, below, hsides, lhs, rhs, vsides, box, border</td> <td>Not supported in HTML5. Specifies which parts of the outside borders that should be visible</td> </tr> <tr> <td>rules</td> <td>none, groups, rows, cols, all</td> <td>Not supported in HTML5. Specifies which parts of the inside borders that should be visible</td> </tr> <tr> <td>summary</td> <td>text</td> <td>Not supported in HTML5. Specifies a summary of the content of a table</td> </tr> <tr> <td>width</td> <td>pixels, %</td> <td>Not supported in HTML5. Specifies the width of a table</td> </tr> </tbody> </table> </div> </section>

Avec ce CSS:

html, body{ margin:0; padding:0; height:100%; } section { position: relative; border: 1px solid #000; padding-top: 37px; background: #500; } section.positioned { position: absolute; top:100px; left:100px; width:800px; box-shadow: 0 0 15px #333; } .container { overflow-y: auto; height: 200px; } table { border-spacing: 0; width:100%; } td + td { border-left:1px solid #eee; } td, th { border-bottom:1px solid #eee; background: #ddd; color: #000; padding: 10px 25px; } th { height: 0; line-height: 0; padding-top: 0; padding-bottom: 0; color: transparent; border: none; white-space: nowrap; } th div{ position: absolute; background: transparent; color: #fff; padding: 9px 25px; top: 0; margin-left: -25px; line-height: normal; border-left: 1px solid #800; } th:first-child div{ border: none; }

Mais comment?!

Vous avez tout simplement un en-tête de table que vous cachez visuellement en lui donnant une hauteur de 0px, qui contient également les div utilisés comme en-tête fixe. Le conteneur de la table laisse suffisamment de place en haut pour permettre un en-tête positionné de manière absolue, et la table avec des barres de défilement apparaît comme vous le souhaitiez.

Le code ci-dessus utilise la classe positionnée pour positionner la table de manière absolue (je l'utilise dans une boîte de dialogue de style contextuelle), mais vous pouvez également l'utiliser dans le flux du document en supprimant la classe positioned du conteneur.

Mais ...

Ce n'est pas parfait Firefox refuse de faire la ligne d'en-tête 0px (au moins, je n'ai trouvé aucun moyen) mais la maintient obstinément à 4px au minimum ... Ce n'est pas un gros problème, mais selon votre style, cela gâchera vos frontières, etc.

La table utilise également une approche de colonne factice dans laquelle la couleur d’arrière-plan du conteneur lui-même est utilisée comme arrière-plan des divs d’en-tête, qui sont transparents.

Résumé

Dans l’ensemble, il pourrait y avoir des problèmes de style en fonction de vos besoins, en particulier des bordures ou des arrière-plans compliqués. Il y a peut-être aussi des problèmes de calcul. Je n'ai pas encore vérifié le logiciel dans une grande variété de navigateurs (merci de commenter vos expériences si vous l'essayez), mais je n'ai rien trouvé de tel, alors j'ai pensé qu'il valait la peine de le poster. en tous cas ...

djsadinoff · Answer

Toutes les tentatives faites pour résoudre ce problème en dehors de la spécification CSS ne reflètent que ce que nous souhaitons réellement: offrir la promesse implicite de THEAD.

Ce problème d'en-têtes congelés-pour-une-table est une plaie ouverte en HTML/CSS depuis longtemps.

Dans un monde parfait, il y aurait une solution purement CSS pour résoudre ce problème. Malheureusement, il ne semble pas y en avoir un bon en place.

Les discussions sur les normes pertinentes sur ce sujet incluent:

UPDATE: Firefox fourni position:sticky en version 32. Tout le monde y gagne!

oma · Answer

Voici un plugin jQuery pour les en-têtes de table fixes. Il permet à toute la page de défiler, gelant l'en-tête quand il atteint le haut. Cela fonctionne bien avec Twitter Bootstrap tables.

Dépôt GitHub: https://github.com/oma/table-fixed-header

Not ne fait défiler que le contenu du tableau. Cherchez d'autres outils pour cela, comme l'une de ces autres réponses. Vous décidez ce qui convient le mieux à votre cas.

Matt · Answer

La plupart des solutions publiées ici nécessitent jQuery. Si vous recherchez une solution indépendante du framework, essayez Grid: http://www.matts411.com/post/grid/

Il est hébergé sur Github ici: https://github.com/mmurph211/Grid

Non seulement il prend en charge les en-têtes fixes, il prend également en charge les colonnes et les pieds gauche fixes, entre autres.

DoctorDestructo · Answer

Un tableau de défilement CSS pur plus raffiné

Toutes les solutions CSS pures que j'ai vues jusqu'à présent - aussi intelligentes soient-elles - ne possèdent pas un certain niveau de finition, ou ne fonctionnent tout simplement pas correctement dans certaines situations. Alors j'ai décidé de créer le mien ...

Caractéristiques:

C'est du pur CSS, donc pas besoin de jQuery (ni de code JavaScript, pour ça Matière)
Vous pouvez définir la largeur de la table sur un pourcentage (a.k.a. "fluide") ou une valeur fixe, ou laisser le contenu déterminer sa largeur (a.k.a. "auto")
Les largeurs de colonne peuvent également être fluides, fixes ou automatiques.
Les colonnes ne seront jamais mal alignées avec les en-têtes en raison du défilement horizontal (un problème qui se produit dans toutes les solutions basées sur CSS que j'ai déjà vues et ne nécessitant pas de largeurs fixes).
Compatible avec tous les navigateurs de bureau populaires, y compris Internet Explorer, retour à la version 8
Aspect propre et poli; pas d'espaces de 1 pixel ni de bordures mal alignées; ressemble à tous les navigateurs

Voici quelques violons montrant les options de largeur de fluide et automatique:

Fluid Width and Height (s'adapte à la taille de l'écran): jsFiddle (notez que la barre de défilement s'affiche uniquement lorsque cela est nécessaire dans cette configuration. Vous devrez donc peut-être réduire le cadre pour le voir)
Largeur automatique, hauteur fixe (plus facile à intégrer à d'autres contenus): jsFiddle

La configuration de largeur automatique, hauteur fixe a probablement plus de cas d'utilisation, donc je posterai le code ci-dessous.

/* The following 'html' and 'body' rule sets are required only if using a % width or height*/ /*html { width: 100%; height: 100%; }*/ body { box-sizing: border-box; width: 100%; height: 100%; margin: 0; padding: 0 20px 0 20px; text-align: center; } .scrollingtable { box-sizing: border-box; display: inline-block; vertical-align: middle; overflow: hidden; width: auto; /* If you want a fixed width, set it here, else set to auto */ min-width: 0/*100%*/; /* If you want a % width, set it here, else set to 0 */ height: 188px/*100%*/; /* Set table height here; can be fixed value or % */ min-height: 0/*104px*/; /* If using % height, make this large enough to fit scrollbar arrows + caption + thead */ font-family: Verdana, Tahoma, sans-serif; font-size: 16px; line-height: 20px; padding: 20px 0 20px 0; /* Need enough padding to make room for caption */ text-align: left; } .scrollingtable * {box-sizing: border-box;} .scrollingtable > div { position: relative; border-top: 1px solid black; height: 100%; padding-top: 20px; /* This determines column header height */ } .scrollingtable > div:before { top: 0; background: cornflowerblue; /* Header row background color */ } .scrollingtable > div:before, .scrollingtable > div > div:after { content: ""; position: absolute; z-index: -1; width: 100%; height: 100%; left: 0; } .scrollingtable > div > div { min-height: 0/*43px*/; /* If using % height, make this large enough to fit scrollbar arrows */ max-height: 100%; overflow: scroll/*auto*/; /* Set to auto if using fixed or % width; else scroll */ overflow-x: hidden; border: 1px solid black; /* Border around table body */ } .scrollingtable > div > div:after {background: white;} /* Match page background color */ .scrollingtable > div > div > table { width: 100%; border-spacing: 0; margin-top: -20px; /* Inverse of column header height */ /*margin-right: 17px;*/ /* Uncomment if using % width */ } .scrollingtable > div > div > table > caption { position: absolute; top: -20px; /*inverse of caption height*/ margin-top: -1px; /*inverse of border-width*/ width: 100%; font-weight: bold; text-align: center; } .scrollingtable > div > div > table > * > tr > * {padding: 0;} .scrollingtable > div > div > table > thead { vertical-align: bottom; white-space: nowrap; text-align: center; } .scrollingtable > div > div > table > thead > tr > * > div { display: inline-block; padding: 0 6px 0 6px; /*header cell padding*/ } .scrollingtable > div > div > table > thead > tr > :first-child:before { content: ""; position: absolute; top: 0; left: 0; height: 20px; /*match column header height*/ border-left: 1px solid black; /*leftmost header border*/ } .scrollingtable > div > div > table > thead > tr > * > div[label]:before, .scrollingtable > div > div > table > thead > tr > * > div > div:first-child, .scrollingtable > div > div > table > thead > tr > * + :before { position: absolute; top: 0; white-space: pre-wrap; color: white; /*header row font color*/ } .scrollingtable > div > div > table > thead > tr > * > div[label]:before, .scrollingtable > div > div > table > thead > tr > * > div[label]:after {content: attr(label);} .scrollingtable > div > div > table > thead > tr > * + :before { content: ""; display: block; min-height: 20px; /* Match column header height */ padding-top: 1px; border-left: 1px solid black; /* Borders between header cells */ } .scrollingtable .scrollbarhead {float: right;} .scrollingtable .scrollbarhead:before { position: absolute; width: 100px; top: -1px; /* Inverse border-width */ background: white; /* Match page background color */ } .scrollingtable > div > div > table > tbody > tr:after { content: ""; display: table-cell; position: relative; padding: 0; border-top: 1px solid black; top: -1px; /* Inverse of border width */ } .scrollingtable > div > div > table > tbody {vertical-align: top;} .scrollingtable > div > div > table > tbody > tr {background: white;} .scrollingtable > div > div > table > tbody > tr > * { border-bottom: 1px solid black; padding: 0 6px 0 6px; height: 20px; /* Match column header height */ } .scrollingtable > div > div > table > tbody:last-of-type > tr:last-child > * {border-bottom: none;} .scrollingtable > div > div > table > tbody > tr:nth-child(even) {background: gainsboro;} /* Alternate row color */ .scrollingtable > div > div > table > tbody > tr > * + * {border-left: 1px solid black;} /* Borders between body cells */

<div class="scrollingtable"> <div> <div> <table> <caption>Top Caption</caption> <thead> <tr> <th><div label="Column 1"/></th> <th><div label="Column 2"/></th> <th><div label="Column 3"/></th> <th> <!-- More versatile way of doing column label; requires two identical copies of label --> <div><div>Column 4</div><div>Column 4</div></div> </th> <th class="scrollbarhead"/> <!-- ALWAYS ADD THIS EXTRA CELL AT END OF HEADER ROW --> </tr> </thead> <tbody> <tr><td>Lorem ipsum</td><td>Dolor</td><td>Sit</td><td>Amet consectetur</td></tr> <tr><td>Lorem ipsum</td><td>Dolor</td><td>Sit</td><td>Amet consectetur</td></tr> <tr><td>Lorem ipsum</td><td>Dolor</td><td>Sit</td><td>Amet consectetur</td></tr> <tr><td>Lorem ipsum</td><td>Dolor</td><td>Sit</td><td>Amet consectetur</td></tr> <tr><td>Lorem ipsum</td><td>Dolor</td><td>Sit</td><td>Amet consectetur</td></tr> <tr><td>Lorem ipsum</td><td>Dolor</td><td>Sit</td><td>Amet consectetur</td></tr> <tr><td>Lorem ipsum</td><td>Dolor</td><td>Sit</td><td>Amet consectetur</td></tr> <tr><td>Lorem ipsum</td><td>Dolor</td><td>Sit</td><td>Amet consectetur</td></tr> <tr><td>Lorem ipsum</td><td>Dolor</td><td>Sit</td><td>Amet consectetur</td></tr> <tr><td>Lorem ipsum</td><td>Dolor</td><td>Sit</td><td>Amet consectetur</td></tr> <tr><td>Lorem ipsum</td><td>Dolor</td><td>Sit</td><td>Amet consectetur</td></tr> <tr><td>Lorem ipsum</td><td>Dolor</td><td>Sit</td><td>Amet consectetur</td></tr> </tbody> </table> </div> Faux bottom caption </div> </div> <!--[if lte IE 9]><style>.scrollingtable > div > div > table {margin-right: 17px;}</style><![endif]-->

La méthode que j'ai utilisée pour geler la ligne d'en-tête est similaire à celle de d-Pixie, référez-vous donc à son post pour une explication. Il y avait une multitude de bugs et de limitations avec cette technique qui ne pouvaient être corrigés qu'avec des tas de CSS supplémentaires et un conteneur div supplémentaire ou deux.

Nathan Long · Answer

Un simple plugin jQuery

Ceci est une variation de la solution de Mahes. Vous pouvez l'appeler comme $('table#foo').scrollableTable();

L'idée est:

Divisez les thead et tbody en éléments table séparés
Faire correspondre la largeur de leurs cellules à nouveau
Envelopper la seconde table dans un div.scrollable
Utilisez CSS pour faire défiler div.scrollable

Le CSS pourrait être:

div.scrollable { height: 300px; overflow-y: scroll;}

Mises en garde

De toute évidence, la scission de ces tables rend la balise moins sémantique. Je ne sais pas quel effet cela a sur l'accessibilité.
Ce plugin ne traite pas les pieds de page, les en-têtes multiples, etc.
Je ne l'ai testé que dans la version 20 de Chrome.

Cela dit, cela fonctionne pour moi et vous êtes libre de le prendre et de le modifier.

Voici le plugin:

jQuery.fn.scrollableTable = function () { var $newTable, $oldTable, $scrollableDiv, originalWidths; $oldTable = $(this); // Once the tables are split, their cell widths may change. // Grab these so we can make the two tables match again. originalWidths = $oldTable.find('tr:first td').map(function() { return $(this).width(); }); $newTable = $oldTable.clone(); $oldTable.find('tbody').remove(); $newTable.find('thead').remove(); $.each([$oldTable, $newTable], function(index, $table) { $table.find('tr:first td').each(function(i) { $(this).width(originalWidths[i]); }); }); $scrollableDiv = $('<div/>').addClass('scrollable'); $newTable.insertAfter($oldTable).wrap($scrollableDiv); };

Daniel Waltrip · Answer

La propriété CSS position: sticky est très bien supportée par la plupart des navigateurs modernes (j'ai eu des problèmes avec Edge, voir ci-dessous).

Cela nous permet de résoudre le problème des en-têtes fixes assez facilement:

thead th { position: sticky; top: 0; }

Safari a besoin d'un préfixe de vendeur: -webkit-sticky.

Pour Firefox, je devais ajouter min-height: 0 à l’un des éléments parents. J'oublie exactement pourquoi c'était nécessaire.

Malheureusement, la mise en œuvre de Microsoft Edge semble ne fonctionner que partiellement. Au moins, mes tests comportaient des cellules de tableau scintillantes et mal alignées. La table était toujours utilisable, mais posait des problèmes esthétiques importants.

Anton Matyulkov · Answer

:)

Solution pas si propre, mais pure HTML/CSS.

table { overflow-x:scroll; } tbody { max-height: /*your desired max height*/ overflow-y:scroll; display:block; }

Mise à jour pour IE8 + Exemple avec JSFiddle

gitaarik · Answer

Support pour pied de page fixe

J'ai étendu la fonction de Nathan pour prendre également en charge un pied de page fixe et une hauteur maximale . En outre, la fonction définira le CSS lui-même et il vous suffira de supporter une largeur.

Usage:

Hauteur fixe:

$('table').scrollableTable({ height: 100 });

Hauteur maximale (si le navigateur prend en charge l'option CSS 'max-height'):

$('table').scrollableTable({ maxHeight: 100 });

Scénario:

jQuery.fn.scrollableTable = function(options) { var $originalTable, $headTable, $bodyTable, $footTable, $scrollableDiv, originalWidths; // Prepare the separate parts of the table $originalTable = $(this); $headTable = $originalTable.clone(); $headTable.find('tbody').remove(); $headTable.find('tfoot').remove(); $bodyTable = $originalTable.clone(); $bodyTable.find('thead').remove(); $bodyTable.find('tfoot').remove(); $footTable = $originalTable.clone(); $footTable.find('thead').remove(); $footTable.find('tbody').remove(); // Grab the original column widths and set them in the separate tables originalWidths = $originalTable.find('tr:first td').map(function() { return $(this).width(); }); $.each([$headTable, $bodyTable, $footTable], function(index, $table) { $table.find('tr:first td').each(function(i) { $(this).width(originalWidths[i]); }); }); // The div that makes the body table scroll $scrollableDiv = $('<div/>').css({ 'overflow-y': 'scroll' }); if(options.height) { $scrollableDiv.css({'height': options.height}); } else if(options.maxHeight) { $scrollableDiv.css({'max-height': options.maxHeight}); } // Add the new separate tables and remove the original one $headTable.insertAfter($originalTable); $bodyTable.insertAfter($headTable); $footTable.insertAfter($bodyTable); $bodyTable.wrap($scrollableDiv); $originalTable.remove(); };

cjk · Answer

Deux divs, un pour l'en-tête, un pour les données. Faites défiler les données de manière à ce qu'elles puissent défiler, et utilisez JavaScript pour définir la largeur des colonnes de l'en-tête de la même manière que les largeurs des données. Je pense que les largeurs des colonnes de données doivent être fixes plutôt que dynamiques.

bzuillsmith · Answer

Je me rends compte que la question autorise JavaScript, mais voici une solution CSS pure que j'ai développée et qui permet également à la table de s’étendre horizontalement. Il a été testé avec Internet Explorer 10 et les derniers navigateurs Chrome et Firefox. Un lien vers jsFiddle est en bas.

Le HTML:

Putting some text here to differentiate between the header aligning with the top of the screen and the header aligning with the top of one of its ancestor containers. <div id="positioning-container"> <div id="scroll-container"> <table> <colgroup> <col class="col1"></col> <col class="col2"></col> </colgroup> <thead> <th class="header-col1"><div>Header 1</div></th> <th class="header-col2"><div>Header 2</div></th> </thead> <tbody> <tr><td>Cell 1.1</td><td>Cell 1.2</td></tr> <tr><td>Cell 2.1</td><td>Cell 2.2</td></tr> <tr><td>Cell 3.1</td><td>Cell 3.2</td></tr> <tr><td>Cell 4.1</td><td>Cell 4.2</td></tr> <tr><td>Cell 5.1</td><td>Cell 5.2</td></tr> <tr><td>Cell 6.1</td><td>Cell 6.2</td></tr> <tr><td>Cell 7.1</td><td>Cell 7.2</td></tr> </tbody> </table> </div> </div>

Et le CSS:

table{ border-collapse: collapse; table-layout: fixed; width: 100%; } /* Not required, just helps with alignment for this example */ td, th{ padding: 0; margin: 0; } tbody{ background-color: #ddf; } thead { /* Keeps the header in place. Don't forget top: 0 */ position: absolute; top: 0; background-color: #ddd; /* The 17px is to adjust for the scrollbar width. * This is a new css value that makes this pure * css example possible */ width: calc(100% - 17px); height: 20px; } /* Positioning container. Required to position the * header since the header uses position:absolute * (otherwise it would position at the top of the screen) */ #positioning-container{ position: relative; } /* A container to set the scroll-bar and * includes padding to move the table contents * down below the header (padding = header height) */ #scroll-container{ overflow-y: auto; padding-top: 20px; height: 100px; } .header-col1{ background-color: red; } /* Fixed-width header columns need a div to set their width */ .header-col1 div{ width: 100px; } /* Expandable columns need a width set on the th tag */ .header-col2{ width: 100%; } .col1 { width: 100px; } .col2{ width: 100%; }

http://jsfiddle.net/HNHRv/3/

Magnus · Answer

Pour ceux qui ont essayé la solution Nice proposée par Maximilian Hils, mais n’ont pas réussi à la faire fonctionner avec Internet Explorer, j’ai eu le même problème (Internet Explorer 11) et découvert quel était le problème.

Dans Internet Explorer 11, la transformation de style (au moins avec translate) ne fonctionne pas sur <THEAD>. J'ai résolu ce problème en appliquant à la place le style à tous les <TH> d'une boucle. Ça a marché. Mon code JavaScript ressemble à ceci:

document.getElementById('pnlGridWrap').addEventListener("scroll", function () { var translate = "translate(0," + this.scrollTop + "px)"; var myElements = this.querySelectorAll("th"); for (var i = 0; i < myElements.length; i++) { myElements[i].style.transform=translate; } });

Dans mon cas, la table était un GridView dans ASP.NET. J'ai d'abord pensé que c'était parce qu'il n'y avait pas de <THEAD>, mais même lorsque je l'ai forcé à en avoir un, cela n'a pas fonctionné. Ensuite, j'ai découvert ce que j'ai écrit ci-dessus.

C'est une solution très simple et agréable. Sur Chrome, c'est parfait, sur Firefox un peu saccadé et sur Internet Explorer, encore plus saccadé. Mais dans l’ensemble, une bonne solution.

podperson · Answer

Voici une solution avec laquelle nous avons fini par travailler (afin de traiter certains cas Edge et les versions antérieures d'Internet Explorer, nous avons également effacé la barre de titre lors du défilement, puis réintégrée celle-ci à la fin du défilement, mais dans les navigateurs Firefox et WebKit. cette solution fonctionne juste _. Elle suppose que l’effondrement de la bordure: effondrement.

La solution réside dans le fait qu’une fois que vous avez appliqué border-collapse, CSS transforme fonctionne sur l’en-tête. Il suffit donc d’intercepter les événements de défilement et de définir correctement la transformation. Vous n'avez pas besoin de dupliquer quoi que ce soit. À moins que ce comportement ne soit correctement implémenté dans le navigateur, il est difficile d’imaginer une solution plus légère.

JSFiddle: http://jsfiddle.net/podperson/tH9VU/2/

Il est implémenté comme un simple plugin jQuery. Vous faites simplement que votre thead soit collante avec un appel comme $ ('thead'). Sticky (), et ils traînent. Cela fonctionne pour plusieurs tableaux sur une page et les sections d'en-tête à mi-chemin des grands tableaux.

$.fn.sticky = function(){ $(this).each( function(){ var thead = $(this), tbody = thead.next('tbody'); updateHeaderPosition(); function updateHeaderPosition(){ if( thead.offset().top < $(document).scrollTop() && tbody.offset().top + tbody.height() > $(document).scrollTop() ){ var tr = tbody.find('tr').last(), y = tr.offset().top - thead.height() < $(document).scrollTop() ? tr.offset().top - thead.height() - thead.offset().top : $(document).scrollTop() - thead.offset().top; thead.find('th').css({ 'z-index': 100, 'transform': 'translateY(' + y + 'px)', '-webkit-transform': 'translateY(' + y + 'px)' }); } else { thead.find('th').css({ 'transform': 'none', '-webkit-transform': 'none' }); } } // See http://www.quirksmode.org/dom/events/scroll.html $(window).on('scroll', updateHeaderPosition); }); } $('thead').sticky();

Selvakumar Arumugam · Answer

J'ai développé un simple plug-in jQuery léger pour convertir un tableau HTML bien formaté en un tableau défilant avec en-tête et colonnes de tableau fixes.

Le plugin fonctionne bien pour faire correspondre pixel à pixel le positionnement de la section fixe avec la section à défilement. En outre, vous pouvez également geler le nombre de colonnes qui seront toujours visibles lors du défilement horizontal.

Démo et documentation: http://meetselva.github.io/fixed-table-rows-cols/

Dépôt GitHub: https://github.com/meetselva/fixed-table-rows-cols

Ci-dessous, l'utilisation d'un tableau simple avec un en-tête fixe,

$(<table selector>).fxdHdrCol({ width: "100%", height: 200, colModal: [{width: 30, align: 'center'}, {width: 70, align: 'center'}, {width: 200, align: 'left'}, {width: 100, align: 'center'}, {width: 70, align: 'center'}, {width: 250, align: 'center'} ] });

user4617883 · Answer

Voici une réponse améliorée à celle publiée par Maximilian Hils .

Celui-ci fonctionne dans Internet Explorer 11 sans aucun scintillement:

var headerCells = tableWrap.querySelectorAll("thead td"); for (var i = 0; i < headerCells.length; i++) { var headerCell = headerCells[i]; headerCell.style.backgroundColor = "silver"; } var lastSTop = tableWrap.scrollTop; tableWrap.addEventListener("scroll", function () { var stop = this.scrollTop; if (stop < lastSTop) { // Resetting the transform for the scrolling up to hide the headers for (var i = 0; i < headerCells.length; i++) { headerCells[i].style.transitionDelay = "0s"; headerCells[i].style.transform = ""; } } lastSTop = stop; var translate = "translate(0," + stop + "px)"; for (var i = 0; i < headerCells.length; i++) { headerCells[i].style.transitionDelay = "0.25s"; headerCells[i].style.transform = translate; } });

Leonid Alzhin · Answer

J'ai trouvé cette solution de contournement: déplacez la ligne d'en-tête dans un tableau au-dessus d'un tableau avec des données:

<html> <head> <title>Fixed header</title> <style> table td {width:75px;} </style> </head> <body> <div style="height:auto; width:350px; overflow:auto"> <table border="1"> <tr> <td>header 1</td> <td>header 2</td> <td>header 3</td> </tr> </table> </div> <div style="height:50px; width:350px; overflow:auto"> <table border="1"> <tr> <td>row 1 col 1</td> <td>row 1 col 2</td> <td>row 1 col 3</td> </tr> <tr> <td>row 2 col 1</td> <td>row 2 col 2</td> <td>row 2 col 3</td> </tr> <tr> <td>row 3 col 1</td> <td>row 3 col 2</td> <td>row 3 col 3</td> </tr> <tr> <td>row 4 col 1</td> <td>row 4 col 2</td> <td>row 4 col 3</td> </tr> <tr> <td>row 5 col 1</td> <td>row 5 col 2</td> <td>row 5 col 3</td> </tr> <tr> <td>row 6 col 1</td> <td>row 6 col 2</td> <td>row 6 col 3</td> </tr> </table> </div> </body> </html>

shilovk · Answer

En appliquant le plugin StickyTableHeaders jQuery à la table, les en-têtes de colonne restent en haut de la fenêtre lorsque vous faites défiler l'écran.

Exemple:

$(function () { $("table").stickyTableHeaders(); }); /*! Copyright (c) 2011 by Jonas Mosbech - https://github.com/jmosbech/StickyTableHeaders MIT license info: https://github.com/jmosbech/StickyTableHeaders/blob/master/license.txt */ ; (function ($, window, undefined) { 'use strict'; var name = 'stickyTableHeaders', id = 0, defaults = { fixedOffset: 0, leftOffset: 0, marginTop: 0, scrollableArea: window }; function Plugin(el, options) { // To avoid scope issues, use 'base' instead of 'this' // to reference this class from internal events and functions. var base = this; // Access to jQuery and DOM versions of element base.$el = $(el); base.el = el; base.id = id++; base.$window = $(window); base.$document = $(document); // Listen for destroyed, call teardown base.$el.bind('destroyed', $.proxy(base.teardown, base)); // Cache DOM refs for performance reasons base.$clonedHeader = null; base.$originalHeader = null; // Keep track of state base.isSticky = false; base.hasBeenSticky = false; base.leftOffset = null; base.topOffset = null; base.init = function () { base.$el.each(function () { var $this = $(this); // remove padding on <table> to fix issue #7 $this.css('padding', 0); base.$originalHeader = $('thead:first', this); base.$clonedHeader = base.$originalHeader.clone(); $this.trigger('clonedHeader.' + name, [base.$clonedHeader]); base.$clonedHeader.addClass('tableFloatingHeader'); base.$clonedHeader.css('display', 'none'); base.$originalHeader.addClass('tableFloatingHeaderOriginal'); base.$originalHeader.after(base.$clonedHeader); base.$printStyle = $('<style type="text/css" media="print">' + '.tableFloatingHeader{display:none !important;}' + '.tableFloatingHeaderOriginal{position:static !important;}' + '</style>'); $('head').append(base.$printStyle); }); base.setOptions(options); base.updateWidth(); base.toggleHeaders(); base.bind(); }; base.destroy = function () { base.$el.unbind('destroyed', base.teardown); base.teardown(); }; base.teardown = function () { if (base.isSticky) { base.$originalHeader.css('position', 'static'); } $.removeData(base.el, 'plugin_' + name); base.unbind(); base.$clonedHeader.remove(); base.$originalHeader.removeClass('tableFloatingHeaderOriginal'); base.$originalHeader.css('visibility', 'visible'); base.$printStyle.remove(); base.el = null; base.$el = null; }; base.bind = function () { base.$scrollableArea.on('scroll.' + name, base.toggleHeaders); if (!base.isWindowScrolling) { base.$window.on('scroll.' + name + base.id, base.setPositionValues); base.$window.on('resize.' + name + base.id, base.toggleHeaders); } base.$scrollableArea.on('resize.' + name, base.toggleHeaders); base.$scrollableArea.on('resize.' + name, base.updateWidth); }; base.unbind = function () { // unbind window events by specifying handle so we don't remove too much base.$scrollableArea.off('.' + name, base.toggleHeaders); if (!base.isWindowScrolling) { base.$window.off('.' + name + base.id, base.setPositionValues); base.$window.off('.' + name + base.id, base.toggleHeaders); } base.$scrollableArea.off('.' + name, base.updateWidth); }; base.toggleHeaders = function () { if (base.$el) { base.$el.each(function () { var $this = $(this), newLeft, newTopOffset = base.isWindowScrolling ? ( isNaN(base.options.fixedOffset) ? base.options.fixedOffset.outerHeight() : base.options.fixedOffset) : base.$scrollableArea.offset().top + (!isNaN(base.options.fixedOffset) ? base.options.fixedOffset : 0), offset = $this.offset(), scrollTop = base.$scrollableArea.scrollTop() + newTopOffset, scrollLeft = base.$scrollableArea.scrollLeft(), scrolledPastTop = base.isWindowScrolling ? scrollTop > offset.top : newTopOffset > offset.top, notScrolledPastBottom = (base.isWindowScrolling ? scrollTop : 0) < (offset.top + $this.height() - base.$clonedHeader.height() - (base.isWindowScrolling ? 0 : newTopOffset)); if (scrolledPastTop && notScrolledPastBottom) { newLeft = offset.left - scrollLeft + base.options.leftOffset; base.$originalHeader.css({ 'position': 'fixed', 'margin-top': base.options.marginTop, 'left': newLeft, 'z-index': 3 // #18: opacity bug }); base.leftOffset = newLeft; base.topOffset = newTopOffset; base.$clonedHeader.css('display', ''); if (!base.isSticky) { base.isSticky = true; // make sure the width is correct: the user might have resized the browser while in static mode base.updateWidth(); } base.setPositionValues(); } else if (base.isSticky) { base.$originalHeader.css('position', 'static'); base.$clonedHeader.css('display', 'none'); base.isSticky = false; base.resetWidth($('td,th', base.$clonedHeader), $('td,th', base.$originalHeader)); } }); } }; base.setPositionValues = function () { var winScrollTop = base.$window.scrollTop(), winScrollLeft = base.$window.scrollLeft(); if (!base.isSticky || winScrollTop < 0 || winScrollTop + base.$window.height() > base.$document.height() || winScrollLeft < 0 || winScrollLeft + base.$window.width() > base.$document.width()) { return; } base.$originalHeader.css({ 'top': base.topOffset - (base.isWindowScrolling ? 0 : winScrollTop), 'left': base.leftOffset - (base.isWindowScrolling ? 0 : winScrollLeft) }); }; base.updateWidth = function () { if (!base.isSticky) { return; } // Copy cell widths from clone if (!base.$originalHeaderCells) { base.$originalHeaderCells = $('th,td', base.$originalHeader); } if (!base.$clonedHeaderCells) { base.$clonedHeaderCells = $('th,td', base.$clonedHeader); } var cellWidths = base.getWidth(base.$clonedHeaderCells); base.setWidth(cellWidths, base.$clonedHeaderCells, base.$originalHeaderCells); // Copy row width from whole table base.$originalHeader.css('width', base.$clonedHeader.width()); }; base.getWidth = function ($clonedHeaders) { var widths = []; $clonedHeaders.each(function (index) { var width, $this = $(this); if ($this.css('box-sizing') === 'border-box') { width = $this[0].getBoundingClientRect().width; // #39: border-box bug } else { var $origTh = $('th', base.$originalHeader); if ($origTh.css('border-collapse') === 'collapse') { if (window.getComputedStyle) { width = parseFloat(window.getComputedStyle(this, null).width); } else { // ie8 only var leftPadding = parseFloat($this.css('padding-left')); var rightPadding = parseFloat($this.css('padding-right')); // Needs more investigation - this is assuming constant border around this cell and it's neighbours. var border = parseFloat($this.css('border-width')); width = $this.outerWidth() - leftPadding - rightPadding - border; } } else { width = $this.width(); } } widths[index] = width; }); return widths; }; base.setWidth = function (widths, $clonedHeaders, $origHeaders) { $clonedHeaders.each(function (index) { var width = widths[index]; $origHeaders.eq(index).css({ 'min-width': width, 'max-width': width }); }); }; base.resetWidth = function ($clonedHeaders, $origHeaders) { $clonedHeaders.each(function (index) { var $this = $(this); $origHeaders.eq(index).css({ 'min-width': $this.css('min-width'), 'max-width': $this.css('max-width') }); }); }; base.setOptions = function (options) { base.options = $.extend({}, defaults, options); base.$scrollableArea = $(base.options.scrollableArea); base.isWindowScrolling = base.$scrollableArea[0] === window; }; base.updateOptions = function (options) { base.setOptions(options); // scrollableArea might have changed base.unbind(); base.bind(); base.updateWidth(); base.toggleHeaders(); }; // Run initializer base.init(); } // A plugin wrapper around the constructor, // preventing against multiple instantiations $.fn[name] = function (options) { return this.each(function () { var instance = $.data(this, 'plugin_' + name); if (instance) { if (typeof options === 'string') { instance[options].apply(instance); } else { instance.updateOptions(options); } } else if (options !== 'destroy') { $.data(this, 'plugin_' + name, new Plugin(this, options)); } }); }; })(jQuery, window);

body { margin: 0 auto; padding: 0 20px; font-family: Arial, Helvetica, sans-serif; font-size: 11px; color: #555; } table { border: 0; padding: 0; margin: 0 0 20px 0; border-collapse: collapse; } th { padding: 5px; /* NOTE: th padding must be set explicitly in order to support IE */ text-align: right; font-weight:bold; line-height: 2em; color: #FFF; background-color: #555; } tbody td { padding: 10px; line-height: 18px; border-top: 1px solid #E0E0E0; } tbody tr:nth-child(2n) { background-color: #F7F7F7; } tbody tr:hover { background-color: #EEEEEE; } td { text-align: right; } td:first-child, th:first-child { text-align: left; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <div style="width:3000px">some really really wide content goes here</div> <table> <thead> <tr> <th colspan="9">Companies listed on NASDAQ OMX Copenhagen.</th> </tr> <tr> <th>Full name</th> <th>CCY</th> <th>Last</th> <th>+/-</th> <th>%</th> <th>Bid</th> <th>Ask</th> <th>Volume</th> <th>Turnover</th> </tr> </thead> <tbody> <tr> <td>A.P. Møller...</td> <td>DKK</td> <td>33,220.00</td> <td>760</td> <td>2.34</td> <td>33,140.00</td> <td>33,220.00</td> <td>594</td> <td>19,791,910</td> </tr> <tr> <td>A.P. Møller...</td> <td>DKK</td> <td>34,620.00</td> <td>640</td> <td>1.88</td> <td>34,620.00</td> <td>34,700.00</td> <td>9,954</td> <td>346,530,246</td> </tr> <tr> <td>Carlsberg A</td> <td>DKK</td> <td>380</td> <td>0</td> <td>0</td> <td>371</td> <td>391.5</td> <td>6</td> <td>2,280</td> </tr> <tr> <td>Carlsberg B</td> <td>DKK</td> <td>364.4</td> <td>8.6</td> <td>2.42</td> <td>363</td> <td>364.4</td> <td>636,267</td> <td>228,530,601</td> </tr> <tr> <td>Chr. Hansen...</td> <td>DKK</td> <td>114.5</td> <td>-1.6</td> <td>-1.38</td> <td>114.2</td> <td>114.5</td> <td>141,822</td> <td>16,311,454</td> </tr> <tr> <td>Coloplast B</td> <td>DKK</td> <td>809.5</td> <td>11</td> <td>1.38</td> <td>809</td> <td>809.5</td> <td>85,840</td> <td>69,363,301</td> </tr> <tr> <td>D/S Norden</td> <td>DKK</td> <td>155</td> <td>-1.5</td> <td>-0.96</td> <td>155</td> <td>155.1</td> <td>51,681</td> <td>8,037,225</td> </tr> <tr> <td>Danske Bank</td> <td>DKK</td> <td>69.05</td> <td>2.55</td> <td>3.83</td> <td>69.05</td> <td>69.2</td> <td>1,723,719</td> <td>115,348,068</td> </tr> <tr> <td>DSV</td> <td>DKK</td> <td>105.4</td> <td>0.2</td> <td>0.19</td> <td>105.2</td> <td>105.4</td> <td>674,873</td> <td>71,575,035</td> </tr> <tr> <td>FLSmidth &amp; Co.</td> <td>DKK</td> <td>295.8</td> <td>-1.8</td> <td>-0.6</td> <td>295.1</td> <td>295.8</td> <td>341,263</td> <td>100,301,032</td> </tr> <tr> <td>G4S plc</td> <td>DKK</td> <td>22.53</td> <td>0.05</td> <td>0.22</td> <td>22.53</td> <td>22.57</td> <td>190,920</td> <td>4,338,150</td> </tr> <tr> <td>Jyske Bank</td> <td>DKK</td> <td>144.2</td> <td>1.4</td> <td>0.98</td> <td>142.8</td> <td>144.2</td> <td>78,163</td> <td>11,104,874</td> </tr> <tr> <td>Københavns ...</td> <td>DKK</td> <td>1,580.00</td> <td>-12</td> <td>-0.75</td> <td>1,590.00</td> <td>1,620.00</td> <td>82</td> <td>131,110</td> </tr> <tr> <td>Lundbeck</td> <td>DKK</td> <td>103.4</td> <td>-2.5</td> <td>-2.36</td> <td>103.4</td> <td>103.8</td> <td>157,162</td> <td>16,462,282</td> </tr> <tr> <td>Nordea Bank</td> <td>DKK</td> <td>43.22</td> <td>-0.06</td> <td>-0.14</td> <td>43.22</td> <td>43.25</td> <td>167,520</td> <td>7,310,143</td> </tr> <tr> <td>Novo Nordisk B</td> <td>DKK</td> <td>552.5</td> <td>-3.5</td> <td>-0.63</td> <td>550.5</td> <td>552.5</td> <td>843,533</td> <td>463,962,375</td> </tr> <tr> <td>Novozymes B</td> <td>DKK</td> <td>805.5</td> <td>5.5</td> <td>0.69</td> <td>805</td> <td>805.5</td> <td>152,188</td> <td>121,746,199</td> </tr> <tr> <td>Pandora</td> <td>DKK</td> <td>39.04</td> <td>0.94</td> <td>2.47</td> <td>38.8</td> <td>39.04</td> <td>350,965</td> <td>13,611,838</td> </tr> <tr> <td>Rockwool In...</td> <td>DKK</td> <td>492</td> <td>0</td> <td>0</td> <td>482</td> <td>492</td> <td></td> <td></td> </tr> <tr> <td>Rockwool In...</td> <td>DKK</td> <td>468</td> <td>12</td> <td>2.63</td> <td>465.2</td> <td>468</td> <td>9,885</td> <td>4,623,850</td> </tr> <tr> <td>Sydbank</td> <td>DKK</td> <td>95</td> <td>0.05</td> <td>0.05</td> <td>94.7</td> <td>95</td> <td>103,438</td> <td>9,802,899</td> </tr> <tr> <td>TDC</td> <td>DKK</td> <td>43.6</td> <td>0.13</td> <td>0.3</td> <td>43.5</td> <td>43.6</td> <td>845,110</td> <td>36,785,339</td> </tr> <tr> <td>Topdanmark</td> <td>DKK</td> <td>854</td> <td>13.5</td> <td>1.61</td> <td>854</td> <td>855</td> <td>38,679</td> <td>32,737,678</td> </tr> <tr> <td>Tryg</td> <td>DKK</td> <td>290.4</td> <td>0.3</td> <td>0.1</td> <td>290</td> <td>290.4</td> <td>94,587</td> <td>27,537,247</td> </tr> <tr> <td>Vestas Wind...</td> <td>DKK</td> <td>90.15</td> <td>-4.2</td> <td>-4.45</td> <td>90.1</td> <td>90.15</td> <td>1,317,313</td> <td>121,064,314</td> </tr> <tr> <td>William Dem...</td> <td>DKK</td> <td>417.6</td> <td>0.1</td> <td>0.02</td> <td>417</td> <td>417.6</td> <td>64,242</td> <td>26,859,554</td> </tr> </tbody> </table> <div style="height: 4000px">lots of content down here...</div>

pilavdzice · Answer

Beaucoup de gens semblent chercher cette réponse. Je trouvais cela enterré dans une réponse à une autre question ici: Synchroniser la largeur des colonnes entre les tableaux dans deux cadres différents, etc.

Parmi les dizaines de méthodes que j'ai essayées, c’est la seule méthode que j’ai trouvée qui fonctionne de manière fiable pour vous permettre d’avoir une table du bas avec défilement, la table d’en-tête ayant les mêmes largeurs.

Voici comment je l’ai fait: d’abord, j’ai perfectionné le jsfiddle ci-dessus pour créer cette fonction, qui fonctionne à la fois avec td et th (au cas où certaines personnes utilisant th pour styler leurs lignes d’en-tête).

var setHeaderTableWidth= function (headertableid,basetableid) { $("#"+headertableid).width($("#"+basetableid).width()); $("#"+headertableid+" tr th").each(function (i) { $(this).width($($("#"+basetableid+" tr:first td")[i]).width()); }); $("#" + headertableid + " tr td").each(function (i) { $(this).width($($("#" + basetableid + " tr:first td")[i]).width()); }); }

Ensuite, vous devez créer deux tables. REMARQUE: la table d'en-tête doit avoir une TD supplémentaire pour laisser de la place dans la table du haut pour la barre de défilement, comme ceci:

 <table id="headertable1" class="input-cells table-striped"> <thead> <tr style="background-color:darkgray;color:white;"><th>header1</th><th>header2</th><th>header3</th><th>header4</th><th>header5</th><th>header6</th><th></th></tr> </thead> </table> <div id="resizeToBottom" style="overflow-y:scroll;overflow-x:hidden;"> <table id="basetable1" class="input-cells table-striped"> <tbody > <tr> <td>testdata</td> <td>2</td> <td>3</td> <td>4</span></td> <td>55555555555555</td> <td>test</td></tr> </tbody> </table> </div>

Alors fais quelque chose comme:

 setHeaderTableWidth('headertable1', 'basetable1'); $(window).resize(function () { setHeaderTableWidth('headertable1', 'basetable1'); });

C’est la seule solution que j’ai trouvée sur Stack Overflow qui réponde à de nombreuses questions similaires qui ont été postées et qui fonctionne dans tous mes cas.

Par exemple, j'ai essayé le plugin jQuery stickytables qui ne fonctionne pas avec durandal, et le projet Google Code ici https://code.google.com/p/js-scroll-table-header/issues/detail?id= 2

D'autres solutions impliquant le clonage des tables, des performances médiocres, ou suceuses et ne fonctionnent pas dans tous les cas.

Ces solutions trop complexes ne sont pas nécessaires. Créez simplement deux tables, comme dans les exemples ci-dessous, et appelez la fonction setHeaderTableWidth comme décrit ici et boom, vous avez terminé.

Si cela ne fonctionne pas pour vous, vous jouiez probablement avec votre propriété CSS Box-sizing et vous devez la définir correctement. Il est facile de bousiller votre contenu CSS par accident. Il y a beaucoup de choses qui peuvent aller mal, alors soyez juste conscient/prudent de cela. Cette approche fonctionne pour moi.

Colin · Answer

J'aime Maximillian Hils ' répondre mais j’ai eu quelques problèmes:

la transformation ne fonctionne pas dans Edge ou IE à moins que vous ne l'appliquiez
l'en-tête scintille lors du défilement dans Edge et IE
ma table est chargée en utilisant ajax, je voulais donc attacher à l'événement de défilement de fenêtre plutôt qu'à l'événement de défilement de l'encapsuleur

Pour supprimer le scintillement, j'utilise un délai d'attente pour attendre que l'utilisateur ait terminé le défilement, puis j'applique la transformation - afin que l'en-tête ne soit pas visible pendant le défilement.

J'ai aussi écrit cela en utilisant jQuery, l'un des avantages étant que jQuery devrait gérer les préfixes de fournisseur pour vous.

 var isScrolling, lastTop, lastLeft, isLeftHidden, isTopHidden; //Scroll events don't bubble https://stackoverflow.com/a/19375645/150342 //so can't use $(document).on("scroll", ".table-container-fixed", function (e) { document.addEventListener('scroll', function (event) { var $container = $(event.target); if (!$container.hasClass("table-container-fixed")) return; //transform needs to be applied to th for Edge and IE //in this example I am also fixing the leftmost column var $topLeftCell = $container.find('table:first > thead > tr > th:first'); var $headerCells = $topLeftCell.siblings(); var $columnCells = $container .find('table:first > tbody > tr > td:first-child, ' + 'table:first > tfoot > tr > td:first-child'); //hide the cells while returning otherwise they show on top of the data if (!isLeftHidden) { var currentLeft = $container.scrollLeft(); if (currentLeft < lastLeft) { //scrolling left isLeftHidden = true; $topLeftCell.css('visibility', 'hidden'); $columnCells.css('visibility', 'hidden'); } lastLeft = currentLeft; } if (!isTopHidden) { var currentTop = $container.scrollTop(); if (currentTop < lastTop) { //scrolling up isTopHidden = true; $topLeftCell.css('visibility', 'hidden'); $headerCells.css('visibility', 'hidden'); } lastTop = currentTop; } // Using timeout to delay transform until user stops scrolling // Clear timeout while scrolling window.clearTimeout(isScrolling); // Set a timeout to run after scrolling ends isScrolling = setTimeout(function () { //move the table cells. var x = $container.scrollLeft(); var y = $container.scrollTop(); $topLeftCell.css('transform', 'translate(' + x + 'px, ' + y + 'px)'); $headerCells.css('transform', 'translateY(' + y + 'px)'); $columnCells.css('transform', 'translateX(' + x + 'px)'); isTopHidden = isLeftHidden = false; $topLeftCell.css('visibility', 'inherit'); $headerCells.css('visibility', 'inherit'); $columnCells.css('visibility', 'inherit'); }, 100); }, true);

La table est encapsulée dans un div avec la classe table-container-fixed.

.table-container-fixed{ overflow: auto; height: 400px; }

J'ai défini border-collapse pour séparer, car sinon, nous perdons des bordures lors de la traduction et je supprime la bordure du tableau pour empêcher le contenu d'apparaître juste au-dessus de la cellule où se trouvait la bordure lors du défilement.

.table-container-fixed > table { border-collapse: separate; border:none; }

Je crée un arrière-plan th blanc afin de couvrir les cellules situées en dessous, et j'ajoute une bordure qui correspond à la bordure du tableau, qui est stylée à l'aide de Bootstrap et dont l'affichage est déroulé.

 .table-container-fixed > table > thead > tr > th { border-top: 1px solid #ddd !important; background-color: white; z-index: 10; position: relative;/*to make z-index work*/ } .table-container-fixed > table > thead > tr > th:first-child { z-index: 20; } .table-container-fixed > table > tbody > tr > td:first-child, .table-container-fixed > table > tfoot > tr > td:first-child { background-color: white; z-index: 10; position: relative; }

DevlshOne · Answer

Ce n'est pas une solution exacte à la ligne d'en-tête fixe, mais j'ai créé une méthode assez ingénieuse pour répéter la ligne d'en-tête dans la longue table, tout en conservant la possibilité de trier.

Cette petite option nécessite le plugin jQuery tablesorter . Voici comment ça fonctionne:

HTML

<table class="tablesorter boxlist" id="pmtable"> <thead class="fixedheader"> <tr class="boxheadrow"> <th width="70px" class="header">Job Number</th> <th width="10px" class="header">Pri</th> <th width="70px" class="header">CLLI</th> <th width="35px" class="header">Market</th> <th width="35px" class="header">Job Status</th> <th width="65px" class="header">Technology</th> <th width="95px;" class="header headerSortDown">MEI</th> <th width="95px" class="header">TEO Writer</th> <th width="75px" class="header">Quote Due</th> <th width="100px" class="header">Engineer</th> <th width="75px" class="header">ML Due</th> <th width="75px" class="header">ML Complete</th> <th width="75px" class="header">SPEC Due</th> <th width="75px" class="header">SPEC Complete</th> <th width="100px" class="header">Install Supervisor</th> <th width="75px" class="header">MasTec OJD</th> <th width="75px" class="header">Install Start</th> <th width="30px" class="header">Install Hours</th> <th width="75px" class="header">Revised CRCD</th> <th width="75px" class="header">Latest Ship-To-Site</th> <th width="30px" class="header">Total Parts</th> <th width="30px" class="header">OEM Rcvd</th> <th width="30px" class="header">Minor Rcvd</th> <th width="30px" class="header">Total Received</th> <th width="30px" class="header">% On Site</th> <th width="60px" class="header">Actions</th> </tr> </thead> <tbody class="scrollable"> <tr data-job_id="3548" data-ml_id="" class="odd"> <td class="c black">FL-8-RG9UP</td> <td data-pri="2" class="priority c yellow">M</td> <td class="c">FTLDFLOV</td> <td class="c">SFL</td> <td class="c">NOI</td> <td class="c">TRANSPORT</td> <td class="c"></td> <td class="c">Chris Byrd</td> <td class="c">Apr 13, 2013</td> <td class="c">Kris Hall</td> <td class="c">May 20, 2013</td> <td class="c">May 20, 2013</td> <td class="c">Jun 5, 2013</td> <td class="c">Jun 7, 2013</td> <td class="c">Joseph Fitz</td> <td class="c">Jun 10, 2013</td> <td class="c">TBD</td> <td class="c">123</td> <td class="c revised_crcd"><input readonly="true" name="revised_crcd" value="Jul 26, 2013" type="text" size="12" class="smInput r_crcd c hasDatepicker" id="dp1377194058616"></td> <td class="c">TBD</td> <td class="c">N/A</td> <td class="c">N/A</td> <td class="c">N/A</td> <td class="c">N/A</td> <td class="c">N/A</td> <td class="actions"><span style="float:left;" class="ui-icon ui-icon-folder-open editJob" title="View this job" s="" details'=""></span></td> </tr> <tr data-job_id="4264" data-ml_id="2959" class="even"> <td class="c black">MTS13009SF</td> <td data-pri="2" class="priority c yellow">M</td> <td class="c">OJUSFLTL</td> <td class="c">SFL</td> <td class="c">NOI</td> <td class="c">TRANSPORT</td> <td class="c"></td> <td class="c">DeMarcus Stewart</td> <td class="c">May 22, 2013</td> <td class="c">Ryan Alsobrook</td> <td class="c">Jun 19, 2013</td> <td class="c">Jun 27, 2013</td> <td class="c">Jun 19, 2013</td> <td class="c">Jul 4, 2013</td> <td class="c">Randy Williams</td> <td class="c">Jun 21, 2013</td> <td class="c">TBD</td> <td class="c">95</td> <td class="c revised_crcd"><input readonly="true" name="revised_crcd" value="Aug 9, 2013" type="text" size="12" class="smInput r_crcd c hasDatepicker" id="dp1377194058632"></td><td class="c">TBD</td> <td class="c">0</td> <td class="c">0.00%</td> <td class="c">0.00%</td> <td class="c">0.00%</td> <td class="c">0.00%</td> <td class="actions"><span style="float:left;" class="ui-icon ui-icon-folder-open editJob" title="View this job" s="" details'=""></span><input style="float:left;" type="hidden" name="req_ship" class="reqShip hasDatepicker" id="dp1377194058464"><span style="float:left;" class="ui-icon ui-icon-calendar requestShip" title="Schedule this job for shipping"></span><span class="ui-icon ui-icon-info viewOrderInfo" style="float:left;" title="Show material details for this order"></span></td> </tr> . . . . <tr class="boxheadrow repeated-header"> <th width="70px" class="header">Job Number</th> <th width="10px" class="header">Pri</th> <th width="70px" class="header">CLLI</th> <th width="35px" class="header">Market</th> <th width="35px" class="header">Job Status</th> <th width="65px" class="header">Technology</th> <th width="95px;" class="header">MEI</th> <th width="95px" class="header">TEO Writer</th> <th width="75px" class="header">Quote Due</th> <th width="100px" class="header">Engineer</th> <th width="75px" class="header">ML Due</th> <th width="75px" class="header">ML Complete</th> <th width="75px" class="header">SPEC Due</th> <th width="75px" class="header">SPEC Complete</th> <th width="100px" class="header">Install Supervisor</th> <th width="75px" class="header">MasTec OJD</th> <th width="75px" class="header">Install Start</th> <th width="30px" class="header">Install Hours</th> <th width="75px" class="header">Revised CRCD</th> <th width="75px" class="header">Latest Ship-To-Site</th> <th width="30px" class="header">Total Parts</th> <th width="30px" class="header">OEM Rcvd</th> <th width="30px" class="header">Minor Rcvd</th> <th width="30px" class="header">Total Received</th> <th width="30px" class="header">% On Site</th> <th width="60px" class="header">Actions</th> </tr>

De toute évidence, ma table a beaucoup plus de lignes que cela. 193 pour être exact, mais vous pouvez voir où la ligne d'en-tête se répète. La ligne d'en-tête répétitive est définie par cette fonction:

jQuery

// Clone the original header row and add the "repeated-header" class var tblHeader = $('tr.boxheadrow').clone().addClass('repeated-header'); // Add the cloned header with the new class every 34th row (or as you see fit) $('tbody tr:odd:nth-of-type(17n)').after(tblHeader); // On the 'sortStart' routine, remove all the inserted header rows $('#pmtable').bind('sortStart', function() { $('.repeated-header').remove(); // On the 'sortEnd' routine, add back all the header row lines. }).bind('sortEnd', function() { $('tbody tr:odd:nth-of-type(17n)').after(tblHeader); });

1.618 · Answer

<html> <head> <script src="//cdn.jsdelivr.net/npm/jquery@3.2.1/dist/jquery.min.js"></script> <script> function stickyTableHead (tableID) { var $tmain = $(tableID); var $tScroll = $tmain.children("thead") .clone() .wrapAll('<table id="tScroll" />') .parent() .addClass($(tableID).attr("class")) .css("position", "fixed") .css("top", "0") .css("display", "none") .prependTo("#tMain"); var pos = $tmain.offset().top + $tmain.find(">thead").height(); $(document).scroll(function () { var dataScroll = $tScroll.data("scroll"); dataScroll = dataScroll || false; if ($(this).scrollTop() >= pos) { if (!dataScroll) { $tScroll .data("scroll", true) .show() .find("th").each(function () { $(this).width($tmain.find(">thead>tr>th").eq($(this).index()).width()); }); } } else { if (dataScroll) { $tScroll .data("scroll", false) .hide() ; } } }); } $(document).ready(function () { stickyTableHead('#tMain'); }); </script> </head> <body> gfgfdgsfgfdgfds<br/> gfgfdgsfgfdgfds<br/> gfgfdgsfgfdgfds<br/> gfgfdgsfgfdgfds<br/> gfgfdgsfgfdgfds<br/> gfgfdgsfgfdgfds<br/> <table id="tMain" > <thead> <tr> <th>1</th> <th>2</th><th>3</th> <th>4</th><th>5</th> <th>6</th><th>7</th> <th>8</th> </tr> </thead> <tbody> <tr><td>11111111111111111111111111111111111111111111111111111111</td><td>2</td><td>3</td><td>4</td><td>5555555</td><td>66666666666</td><td>77777777777</td><td>8888888888888888</td></tr> <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5555555</td><td>66666666666</td><td>77777777777</td><td>8888888888888888</td></tr> <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5555555</td><td>66666666666</td><td>77777777777</td><td>8888888888888888</td></tr> <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5555555</td><td>66666666666</td><td>77777777777</td><td>8888888888888888</td></tr> <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5555555</td><td>66666666666</td><td>77777777777</td><td>8888888888888888</td></tr> <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5555555</td><td>66666666666</td><td>77777777777</td><td>8888888888888888</td></tr> <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5555555</td><td>66666666666</td><td>77777777777</td><td>8888888888888888</td></tr> <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5555555</td><td>66666666666</td><td>77777777777</td><td>8888888888888888</td></tr> <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5555555</td><td>66666666666</td><td>77777777777</td><td>8888888888888888</td></tr> <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5555555</td><td>66666666666</td><td>77777777777</td><td>8888888888888888</td></tr> <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5555555</td><td>66666666666</td><td>77777777777</td><td>8888888888888888</td></tr> <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5555555</td><td>66666666666</td><td>77777777777</td><td>8888888888888888</td></tr> <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5555555</td><td>66666666666</td><td>77777777777</td><td>8888888888888888</td></tr> <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5555555</td><td>66666666666</td><td>77777777777</td><td>8888888888888888</td></tr> <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5555555</td><td>66666666666</td><td>77777777777</td><td>8888888888888888</td></tr> <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5555555</td><td>66666666666</td><td>77777777777</td><td>8888888888888888</td></tr> <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5555555</td><td>66666666666</td><td>77777777777</td><td>8888888888888888</td></tr> <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5555555</td><td>66666666666</td><td>77777777777</td><td>8888888888888888</td></tr> <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5555555</td><td>66666666666</td><td>77777777777</td><td>8888888888888888</td></tr> <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5555555</td><td>66666666666</td><td>77777777777</td><td>8888888888888888</td></tr> <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5555555</td><td>66666666666</td><td>77777777777</td><td>8888888888888888</td></tr> <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5555555</td><td>66666666666</td><td>77777777777</td><td>8888888888888888</td></tr> <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5555555</td><td>66666666666</td><td>77777777777</td><td>8888888888888888</td></tr> <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5555555</td><td>66666666666</td><td>77777777777</td><td>8888888888888888</td></tr> <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5555555</td><td>66666666666</td><td>77777777777</td><td>8888888888888888</td></tr> <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5555555</td><td>66666666666</td><td>77777777777</td><td>8888888888888888</td></tr> <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5555555</td><td>66666666666</td><td>77777777777</td><td>8888888888888888</td></tr> <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5555555</td><td>66666666666</td><td>77777777777</td><td>8888888888888888</td></tr> <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5555555</td><td>66666666666</td><td>77777777777</td><td>8888888888888888</td></tr> <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5555555</td><td>66666666666</td><td>77777777777</td><td>8888888888888888</td></tr> <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5555555</td><td>66666666666</td><td>77777777777</td><td>8888888888888888</td></tr> <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5555555</td><td>66666666666</td><td>77777777777</td><td>8888888888888888</td></tr> <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5555555</td><td>66666666666</td><td>77777777777</td><td>8888888888888888</td></tr> <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5555555</td><td>66666666666</td><td>77777777777</td><td>8888888888888888</td></tr> <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5555555</td><td>66666666666</td><td>77777777777</td><td>8888888888888888</td></tr> <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5555555</td><td>66666666666</td><td>77777777777</td><td>8888888888888888</td></tr> </tbody> </table> </body> </html>

Munkhdelger Tumenbayar · Answer

D'une manière ou d'une autre, Position:Sticky a bien fonctionné dans mon cas:

table{ width: 100%; border: collapse; } th{ position: sticky; top: 0px; border: 1px solid black; background: #ff5722; color: #f5f5f5; font-weight: 600; } td{ background: #d3d3d3; border: 1px solid black; color: #f5f5f5; font-weight: 600; } div{ height: 150px overflow: auto; width: 100% }

<div> <table> <thead> <tr> <th>header 1</th> <th>header 2</th> <th>header 3</th> <th>header 4</th> <th>header 5</th> <th>header 6</th> <th>header 7</th> </tr> </thead> <tbody> <tr> <td>data 1</td> <td>data 2</td> <td>data 3</td> <td>data 4</td> <td>data 5</td> <td>data 6</td> <td>data 7</td> </tr> <tr> <td>data 1</td> <td>data 2</td> <td>data 3</td> <td>data 4</td> <td>data 5</td> <td>data 6</td> <td>data 7</td> </tr> <tr> <td>data 1</td> <td>data 2</td> <td>data 3</td> <td>data 4</td> <td>data 5</td> <td>data 6</td> <td>data 7</td> </tr> <tr> <td>data 1</td> <td>data 2</td> <td>data 3</td> <td>data 4</td> <td>data 5</td> <td>data 6</td> <td>data 7</td> </tr> <tr> <td>data 1</td> <td>data 2</td> <td>data 3</td> <td>data 4</td> <td>data 5</td> <td>data 6</td> <td>data 7</td> </tr> <tr> <td>data 1</td> <td>data 2</td> <td>data 3</td> <td>data 4</td> <td>data 5</td> <td>data 6</td> <td>data 7</td> </tr> <tr> <td>data 1</td> <td>data 2</td> <td>data 3</td> <td>data 4</td> <td>data 5</td> <td>data 6</td> <td>data 7</td> </tr> <tr> <td>data 1</td> <td>data 2</td> <td>data 3</td> <td>data 4</td> <td>data 5</td> <td>data 6</td> <td>data 7</td> </tr> <tr> <td>data 1</td> <td>data 2</td> <td>data 3</td> <td>data 4</td> <td>data 5</td> <td>data 6</td> <td>data 7</td> </tr> <tr> <td>data 1</td> <td>data 2</td> <td>data 3</td> <td>data 4</td> <td>data 5</td> <td>data 6</td> <td>data 7</td> </tr> <tr> <td>data 1</td> <td>data 2</td> <td>data 3</td> <td>data 4</td> <td>data 5</td> <td>data 6</td> <td>data 7</td> </tr> <tr> <td>data 1</td> <td>data 2</td> <td>data 3</td> <td>data 4</td> <td>data 5</td> <td>data 6</td> <td>data 7</td> </tr> <tr> <td>data 1</td> <td>data 2</td> <td>data 3</td> <td>data 4</td> <td>data 5</td> <td>data 6</td> <td>data 7</td> </tr> <tr> <td>data 1</td> <td>data 2</td> <td>data 3</td> <td>data 4</td> <td>data 5</td> <td>data 6</td> <td>data 7</td> </tr> </tbody> </table> </div>

Prabhavith · Answer

Utilisez la dernière version de jQuery et incluez le code JavaScript suivant.

$(window).scroll(function(){ $("id of the div element").offset({top:$(window).scrollTop()}); });

Noah Heldman · Answer

J'aurais aimé avoir trouvé la solution de @ Mark plus tôt, mais je suis allée écrire la mienne avant de voir cette question SO ...

Mine est un plugin jQuery très léger qui prend en charge l’en-tête, le pied de page, la répartition des colonnes (colspan), le redimensionnement, le défilement horizontal et un nombre facultatif de lignes à afficher avant le début du défilement.

jQuery.scrollTableBody (GitHub)

Tant que vous avez une table avec les <thead>, <tbody> et (facultatif) <tfoot> appropriés, tout ce que vous avez à faire est la suivante:

$('table').scrollTableBody();