Comment puis-je laisser le corps d'un tableau défiler tout en gardant la tête bien en place?
J'écris une page où j'ai besoin d'un tableau HTML pour conserver une taille définie. Les en-têtes situés en haut de la table doivent y rester en permanence, mais le corps de la table doit également défiler, peu importe le nombre de lignes ajoutées à la table. Pensez à une mini version d'Excel. Cela semble être une tâche simple, mais presque toutes les solutions trouvées sur le Web présentent des inconvénients. Comment puis-je résoudre ça?
Je devais trouver la même réponse. Le meilleur exemple que j'ai trouvé est http://www.cssplay.co.uk/menu/tablescroll.html - J'ai trouvé que l'exemple n ° 2 fonctionnait bien pour moi. Vous devrez définir la hauteur de la table interne avec Java Script, le reste est en CSS.
J'ai trouvé DataTables être assez flexible. Bien que sa version par défaut soit basée sur jquery, il existe également un plugin AngularJs .
J'ai vu Sean Haddy excellente solution à une question similaire et j'ai pris la liberté de faire quelques modifications :
- Utilisez des classes à la place de l'ID pour qu'un script jQuery puisse être réutilisé pour plusieurs tables sur une page.
- Ajout de la prise en charge des éléments de tableau HTML sémantique tels que caption, thead, tfoot et tbody
- La barre de défilement est facultative et ne s'affiche donc pas pour les tableaux plus "courts" que la hauteur de défilement.
- Ajustement de la largeur de la barre de défilement pour amener la barre de défilement vers la droite. Bord du tableau
- Concept rendu accessible par
- using aria-hidden = "true" sur l'en-tête de table statique injecté
- et en laissant l'original en place, juste caché avec jQuery et définissez
aria-hidden="false"
- Exemples montrés de plusieurs tables avec différentes tailles
Sean a toutefois fait le gros du travail. Merci également à Matt Burland d’avoir souligné la nécessité de soutenir tFoot.
S'il vous plaît voir par vous-même à http://jsfiddle.net/jhfrench/eNP2N/
Avez-vous essayé d'utiliser thead and tbody et de définir une hauteur fixe pour tbody avec débordement: scroll?
Quels sont vos navigateurs cibles?
EDIT: Cela a bien fonctionné (presque) sous firefox - l’ajout de la barre de défilement verticale a également rendu nécessaire l’utilisation d’une barre de défilement horizontale - beurk. IE vient de régler la hauteur de chaque td sur ce que j'avais spécifié comme étant la hauteur de tbody. Voici le meilleur que je pourrais trouver:
<html>
<head>
<title>Blah</title>
<style type="text/css">
table { width:300px; }
tbody { height:10em; overflow:scroll;}
td { height:auto; }
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>One</th><th>Two</th>
</td>
</tr>
</thead>
<tbody>
<tr><td>Data</td><td>Data</td></tr>
<tr><td>Data</td><td>Data</td></tr>
<tr><td>Data</td><td>Data</td></tr>
<tr><td>Data</td><td>Data</td></tr>
<tr><td>Data</td><td>Data</td></tr>
<tr><td>Data</td><td>Data</td></tr>
<tr><td>Data</td><td>Data</td></tr>
<tr><td>Data</td><td>Data</td></tr>
<tr><td>Data</td><td>Data</td></tr>
<tr><td>Data</td><td>Data</td></tr>
<tr><td>Data</td><td>Data</td></tr>
<tr><td>Data</td><td>Data</td></tr>
<tr><td>Data</td><td>Data</td></tr>
<tr><td>Data</td><td>Data</td></tr>
<tr><td>Data</td><td>Data</td></tr>
</tbody>
</table>
</body>
</html>
Ce dont vous avez besoin c'est:
1) avoir un corps de table de hauteur limitée car le défilement ne se produit que lorsque le contenu est plus grand que la fenêtre défilante. Cependant, tbody ne peut pas être dimensionné et vous devez l'afficher sous la forme block pour le faire:
tbody {
overflow-y: auto;
display: block;
max-height: 10em; // For example
}
2) Re-synchroniser les largeurs de colonnes d'en-tête et de corps de tableau, ce qui en fait une variable block en fait un élément non lié. La seule façon de le faire est de simuler la synchronisation par en appliquant la même largeur de colonnes aux deux).
Cependant, étant donné que tbody est elle-même une block, elle ne peut plus se comporter comme une table. Comme vous avez toujours besoin d'un comportement table pour afficher vos colonnes correctement, la solution consiste à demander à chacune de vos lignes de s'afficher sous forme de tables individuel:
thead {
display: table;
width: 100%; // Fill the containing table
}
tbody tr {
display: table;
width: 100%; // Fill the containing table
}
(Notez qu'en utilisant cette technique, vous ne pourrez plus couvrir plusieurs lignes).
Cela fait, vous pouvez imposer aux colonnes thead et tbody la même largeur. Vous ne pouviez pas ça:
- individuellement pour chaque colonne (via des classes CSS spécifiques ou un style inline), ce qui est assez fastidieux à faire pour chaque instance de table;
- uniformément pour toutes les colonnes (jusqu'à
th, td { width: 20%; }si vous avez 5 colonnes par exemple), ce qui est plus pratique (il n'est pas nécessaire de définir la largeur pour chaque instance de table) mais ne peut fonctionner avec aucun nombre de colonnes - uniformément pour tout nombre de colonnes, via une disposition de table fixe.
Je préfère la dernière option, qui nécessite d'ajouter:
thead {
table-layout: fixed; // Same layout for all cells
}
tbody tr {
table-layout: fixed; // Same layout for all cells
}
th, td {
width: auto; // Same width for all cells, if table has fixed layout
}
Voir une démo ici , tirée de la réponse à cette question .
Edit: Ceci est une très vieille réponse et vise à assurer la prospérité simplement pour montrer qu'elle était prise en charge une fois dans les années 2000 mais qu'elle avait été abandonnée car la stratégie des navigateurs des années 2010 consistait à respecter les spécifications du W3C même si certaines fonctionnalités avaient été supprimées: table avec en-tête/pied de page fixe a été spécifiée maladroitement avant HTML5.
Mauvaises nouvelles
Malheureusement, il n’existe aucun moyen élégant de gérer un tableau défilant avec une variable thead/tfoot Car Les spécifications HTML/CSS ne sont pas très claires à propos de cette fonctionnalité .
Des explications
Bien que Spécification HTML 4.01 dit thead/tfoot/tbody sont utilisés (introduits?) Pour faire défiler le corps du tableau:
Les rangées de tableau peuvent être regroupées à l'aide des éléments THEAD, TFOOT et TBODY [...]. Cette division permet aux agents utilisateurs de prendre en charge le défilement des corps de table indépendamment du pied et de la tête de la table.
Mais la fonctionnalité de tableau déroulant sur FF 3.6 a été supprimée car elle est considérée comme un bogue, car elle n’est pas conforme aux spécifications HTML/CSS. Voir this et that commentaires sur les bugs FF.
Conseil du réseau de développeurs Mozilla
Vous trouverez ci-dessous une version simplifiée de la astuces utiles pour le tableau déroulant MDN
voir cette page archivée ou le version française actuelle
<style type="text/css">
table {
border-spacing: 0; /* workaround */
}
tbody {
height: 4em; /* define the height */
overflow-x: hidden; /* esthetics */
overflow-y: auto; /* allow scrolling cells */
}
td {
border-left: 1px solid blue; /* workaround */
border-bottom: 1px solid blue; /* workaround */
}
</style>
<table>
<thead><tr><th>Header
<tfoot><tr><th>Footer
<tbody>
<tr><td>Cell 1 <tr><td>Cell 2
<tr><td>Cell 3 <tr><td>Cell 4
<tr><td>Cell 5 <tr><td>Cell 6
<tr><td>Cell 7 <tr><td>Cell 8
<tr><td>Cell 9 <tr><td>Cell 10
<tr><td>Cell 11 <tr><td>Cell 12
<tr><td>Cell 13 <tr><td>Cell 14
</tbody>
</table>
Cependant MDN dit aussi cela ne marche plus sur FF :-(
J'ai aussi testé sur IE8 => la table ne peut pas défiler non plus: - ((
Cette solution fonctionne sous Chrome 35, Firefox 30 et IE 11 (autres versions non testées).
Son CSS pur: http://jsfiddle.net/ffabreti/d4sope1u/
Tout est paramétré pour afficher: bloc, la table a besoin d'une hauteur:
table {
overflow: scroll;
display: block; /*inline-block*/
height: 120px;
}
thead > tr {
position: absolute;
display: block;
padding: 0;
margin: 0;
top: 0;
background-color: gray;
}
tbody > tr:nth-of-type(1) {
margin-top: 16px;
}
tbody tr {
display: block;
}
td, th {
width: 70px;
border-style:solid;
border-width:1px;
border-color:black;
}
Je ne suis pas sûr que quiconque regarde encore cela, mais comme je l’ai déjà fait, il faut utiliser deux tables pour afficher la seule table originale - la première uniquement la ligne de titre de la table originale et aucune ligne de corps de table ça valide).
La seconde est dans un div séparé et n'a pas de titre et uniquement les lignes du corps de la table d'origine. La div séparée est alors faite défiler.
La seconde table de son div est placée juste en dessous de la première table du code HTML et ressemble à une table unique avec un en-tête fixe et une section inférieure défilable. Je n’ai testé cela que dans Safari, Firefox et IE (les dernières versions de chacune d’elles au printemps 2010), mais cela a fonctionné dans toutes les versions.
Le seul problème rencontré était que la première table ne serait pas validée sans corps (validateur W3.org - XHTML 1.0 strict), et lorsque j'en ajoutais un sans contenu, une ligne vide était générée. Vous pouvez utiliser CSS pour que cela ne soit pas visible, mais cela continue de consommer de l'espace sur la page.
Cela m'a causé de gros maux de tête en essayant de mettre en place une telle grille pour une de nos applications. J'ai essayé toutes les techniques, mais chacune avait des problèmes. Je me suis le plus proche en utilisant un plugin jQuery tel que Flexigrid (regardez sur http://www.ajaxrain.com pour les alternatives), mais cela ne semble pas supporter les tables 100% larges, ce qui est ce dont j'avais besoin.
Ce que j'ai fini par faire était de rouler le mien; Firefox prend en charge le défilement des éléments tbody afin que le navigateur renifle et utilise les feuilles de style CSS appropriées (définition de la hauteur, débordement, etc. demande si vous souhaitez plus de détails), puis pour les autres navigateurs, j’utilise deux tables distinctes configurées pour utiliser table-layout: fixed un algorithme de dimensionnement qui est garanti pour ne pas dépasser la taille indiquée (les tables normales se développeront lorsque le contenu est trop large pour tenir). En donnant des largeurs identiques aux deux tables, j'ai pu aligner leurs colonnes. J'ai enveloppé le second dans un ensemble div pour faire défiler et j'ai réussi à obtenir l'aspect et la sensation que je souhaitais avec un peu de jokery fantaisie avec marges, etc.
Désolé si cette réponse semble un peu vague par endroits; J'écris vite car je n'ai pas beaucoup de temps. Laissez un commentaire si vous voulez que je développe davantage!
Voici un code qui fonctionne vraiment pour IE et FF (au moins):
<html>
<head>
<title>Test</title>
<style type="text/css">
table{
width: 400px;
}
tbody {
height: 100px;
overflow: scroll;
}
div {
height: 100px;
width: 400px;
position: relative;
}
tr.alt td {
background-color: #EEEEEE;
}
</style>
<!--[if IE]>
<style type="text/css">
div {
overflow-y: scroll;
overflow-x: hidden;
}
thead tr {
position: absolute;
top: expression(this.offsetParent.scrollTop);
}
tbody {
height: auto;
}
</style>
<![endif]-->
</head>
<body>
<div >
<table border="0" cellspacing="0" cellpadding="0">
<thead>
<tr>
<th style="background: lightgreen;">user</th>
<th style="background: lightgreen;">email</th>
<th style="background: lightgreen;">id</th>
<th style="background: lightgreen;">Y/N</th>
</tr>
</thead>
<tbody align="center">
<!--[if IE]>
<tr>
<td colspan="4">on IE it's overridden by the header</td>
</tr>
<![endif]-->
<tr>
<td>user 1</td>
<td>[email protected]</td>
<td>1</td>
<td>Y</td>
</tr>
<tr class="alt">
<td>user 2</td>
<td>[email protected]</td>
<td>2</td>
<td>N</td>
</tr>
<tr>
<td>user 3</td>
<td>[email protected]</td>
<td>3</td>
<td>Y</td>
</tr>
<tr class="alt">
<td>user 4</td>
<td>[email protected]</td>
<td>4</td>
<td>N</td>
</tr>
<tr>
<td>user 5</td>
<td>[email protected]</td>
<td>5</td>
<td>Y</td>
</tr>
<tr class="alt">
<td>user 6</td>
<td>[email protected]</td>
<td>6</td>
<td>N</td>
</tr>
<tr>
<td>user 7</td>
<td>[email protected]</td>
<td>7</td>
<td>Y</td>
</tr>
<tr class="alt">
<td>user 8</td>
<td>[email protected]</td>
<td>8</td>
<td>N</td>
</tr>
</tbody>
</table>
</div>
</body></html>
J'ai modifié le code d'origine pour le rendre plus clair et aussi pour le mettre en état de fonctionner correctement dans IE et également dans FF.
Code original ICI
Voici mon alternative. Il utilise également différentes sources DIV pour l'en-tête, le corps et le pied de page, mais synchronisées pour le redimensionnement de la fenêtre et pour la recherche, le défilement, le tri, le filtrage et le positionnement:
Cliquez sur les boutons Jazz, Classique ... pour voir les tableaux. Il est configuré pour qu'il soit adéquat même si JavaScript est désactivé.
Semble OK sur IE, FF et WebKit (Chrome, Safari).
Live JsFiddle
C'est possible avec seulement HTML et CSS
table.scrollTable {
border: 1px solid #963;
width: 718px;
}
thead.fixedHeader {
display: block;
}
thead.fixedHeader tr {
height: 30px;
background: #c96;
}
thead.fixedHeader tr th {
border-right: 1px solid black;
}
tbody.scrollContent {
display: block;
height: 262px;
overflow: auto;
}
tbody.scrollContent td {
background: #eee;
border-right: 1px solid black;
height: 25px;
}
tbody.scrollContent tr.alternateRow td {
background: #fff;
}
thead.fixedHeader th {
width: 233px;
}
thead.fixedHeader th:last-child {
width: 251px;
}
tbody.scrollContent td {
width: 233px;
}<table cellspacing="0" cellpadding="0" class="scrollTable">
<thead class="fixedHeader">
<tr class="alternateRow">
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
</thead>
<tbody class="scrollContent">
<tr class="normalRow">
<td>Cell Content 1</td>
<td>Cell Content 2</td>
<td>Cell Content 3</td>
</tr>
<tr class="alternateRow">
<td>More Cell Content 1</td>
<td>More Cell Content 2</td>
<td>More Cell Content 3</td>
</tr>
<tr class="normalRow">
<td>Even More Cell Content 1</td>
<td>Even More Cell Content 2</td>
<td>Even More Cell Content 3</td>
</tr>
<tr class="alternateRow">
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>And Repeat 3</td>
</tr>
<tr class="normalRow">
<td>Cell Content 1</td>
<td>Cell Content 2</td>
<td>Cell Content 3</td>
</tr>
<tr class="alternateRow">
<td>More Cell Content 1</td>
<td>More Cell Content 2</td>
<td>More Cell Content 3</td>
</tr>
<tr class="normalRow">
<td>Even More Cell Content 1</td>
<td>Even More Cell Content 2</td>
<td>Even More Cell Content 3</td>
</tr>
<tr class="alternateRow">
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>And Repeat 3</td>
</tr>
<tr class="normalRow">
<td>Cell Content 1</td>
<td>Cell Content 2</td>
<td>Cell Content 3</td>
</tr>
<tr class="alternateRow">
<td>More Cell Content 1</td>
<td>More Cell Content 2</td>
<td>More Cell Content 3</td>
</tr>
<tr class="normalRow">
<td>Even More Cell Content 1</td>
<td>Even More Cell Content 2</td>
<td>Even More Cell Content 3</td>
</tr>
<tr class="alternateRow">
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>And Repeat 3</td>
</tr>
<tr class="normalRow">
<td>Cell Content 1</td>
<td>Cell Content 2</td>
<td>Cell Content 3</td>
</tr>
<tr class="alternateRow">
<td>More Cell Content 1</td>
<td>More Cell Content 2</td>
<td>More Cell Content 3</td>
</tr>
<tr class="normalRow">
<td>Even More Cell Content 1</td>
<td>Even More Cell Content 2</td>
<td>Even More Cell Content 3</td>
</tr>
<tr class="alternateRow">
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>And Repeat 3</td>
</tr>
<tr class="normalRow">
<td>Cell Content 1</td>
<td>Cell Content 2</td>
<td>Cell Content 3</td>
</tr>
<tr class="alternateRow">
<td>More Cell Content 1</td>
<td>More Cell Content 2</td>
<td>More Cell Content 3</td>
</tr>
<tr class="normalRow">
<td>Even More Cell Content 1</td>
<td>Even More Cell Content 2</td>
<td>Even More Cell Content 3</td>
</tr>
<tr class="alternateRow">
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>And Repeat 3</td>
</tr>
<tr class="normalRow">
<td>Cell Content 1</td>
<td>Cell Content 2</td>
<td>Cell Content 3</td>
</tr>
<tr class="alternateRow">
<td>More Cell Content 1</td>
<td>More Cell Content 2</td>
<td>More Cell Content 3</td>
</tr>
<tr class="normalRow">
<td>Even More Cell Content 1</td>
<td>Even More Cell Content 2</td>
<td>Even More Cell Content 3</td>
</tr>
<tr class="alternateRow">
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>And Repeat 3</td>
</tr>
<tr class="normalRow">
<td>Cell Content 1</td>
<td>Cell Content 2</td>
<td>Cell Content 3</td>
</tr>
<tr class="alternateRow">
<td>More Cell Content 1</td>
<td>More Cell Content 2</td>
<td>More Cell Content 3</td>
</tr>
<tr class="normalRow">
<td>Even More Cell Content 1</td>
<td>Even More Cell Content 2</td>
<td>Even More Cell Content 3</td>
</tr>
<tr class="alternateRow">
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>And Repeat 3</td>
</tr>
<tr class="normalRow">
<td>Cell Content 1</td>
<td>Cell Content 2</td>
<td>Cell Content 3</td>
</tr>
<tr class="alternateRow">
<td>More Cell Content 1</td>
<td>More Cell Content 2</td>
<td>More Cell Content 3</td>
</tr>
<tr class="normalRow">
<td>Even More Cell Content 1</td>
<td>Even More Cell Content 2</td>
<td>Even More Cell Content 3</td>
</tr>
<tr class="alternateRow">
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>And Repeat 3</td>
</tr>
<tr class="normalRow">
<td>Cell Content 1</td>
<td>Cell Content 2</td>
<td>Cell Content 3</td>
</tr>
<tr class="alternateRow">
<td>More Cell Content 1</td>
<td>More Cell Content 2</td>
<td>More Cell Content 3</td>
</tr>
<tr class="normalRow">
<td>Even More Cell Content 1</td>
<td>Even More Cell Content 2</td>
<td>Even More Cell Content 3</td>
</tr>
<tr class="alternateRow">
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>And Repeat 3</td>
</tr>
<tr class="normalRow">
<td>Cell Content 1</td>
<td>Cell Content 2</td>
<td>Cell Content 3</td>
</tr>
<tr class="alternateRow">
<td>More Cell Content 1</td>
<td>More Cell Content 2</td>
<td>More Cell Content 3</td>
</tr>
<tr class="normalRow">
<td>Even More Cell Content 1</td>
<td>Even More Cell Content 2</td>
<td>Even More Cell Content 3</td>
</tr>
<tr class="alternateRow">
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>And Repeat 3</td>
</tr>
<tr class="normalRow">
<td>Cell Content 1</td>
<td>Cell Content 2</td>
<td>Cell Content 3</td>
</tr>
<tr class="alternateRow">
<td>More Cell Content 1</td>
<td>More Cell Content 2</td>
<td>More Cell Content 3</td>
</tr>
<tr class="normalRow">
<td>Even More Cell Content 1</td>
<td>Even More Cell Content 2</td>
<td>Even More Cell Content 3</td>
</tr>
<tr class="alternateRow">
<td>End of Cell Content 1</td>
<td>End of Cell Content 2</td>
<td>End of Cell Content 3</td>
</tr>
</tbody>
</table>Le principal problème que j'avais avec les suggestions ci-dessus était de pouvoir brancher tablesorter.js ET de pouvoir faire flotter les en-têtes d'une table contrainte à une taille maximale spécifique. Je suis finalement tombé sur le plugin jQuery.floatThead qui fournissait les en-têtes flottants et permettait au tri de continuer à fonctionner.
Il a aussi une belle page de comparaison se montrant vs plugins similaires .
Désolé, je n'ai pas lu toutes les réponses à votre question.
Oui, voici ce que tu veux (je l'ai déjà fait)
Vous pouvez utiliser deux tables, avec le même nom de classe pour un style similaire, l'une avec tête de table et l'autre avec vos lignes . Placez maintenant cette table dans un div ayant une hauteur fixe avec overflow-y: auto OR .
Si vous êtes d'accord pour utiliser JavaScript, voici ma solution Créez un tableau avec une largeur fixe sur toutes les colonnes (pixels!), Ajoutez la classe Scrollify au tableau et ajoutez cet ensemble javascript + jquery 1.4.x à la hauteur en css ou en style!
Testé dans: Opera, Chrome, Safari, FF, IE5.5 ( Échec du script Epic ), IE6, IE7, IE8, IE9.
//Usage add Scrollify class to a table where all columns (header and body) have a fixed pixel width
$(document).ready(function () {
$("table.Scrollify").each(function (index, element) {
var header = $(element).children().children().first();
var headerHtml = header.html();
var width = $(element).outerWidth();
var height = parseInt($(element).css("height")) - header.outerHeight();
$(element).height("auto");
header.remove();
var html = "<table style=\"border-collapse: collapse;\" border=\"1\" rules=\"all\" cellspacing=\"0\"><tr>" + headerHtml +
"</tr></table><div style=\"overflow: auto;border:0;margin:0;padding:0;height:" + height + "px;width:" + (parseInt(width) + scrollbarWidth()) + "px;\">" +
$(element).parent().html() + "</div>";
$(element).parent().html(html);
});
});
//Function source: http://www.fleegix.org/articles/2006-05-30-getting-the-scrollbar-width-in-pixels
//License: Apache License, version 2
function scrollbarWidth() {
var scr = null;
var inn = null;
var wNoScroll = 0;
var wScroll = 0;
// Outer scrolling div
scr = document.createElement('div');
scr.style.position = 'absolute';
scr.style.top = '-1000px';
scr.style.left = '-1000px';
scr.style.width = '100px';
scr.style.height = '50px';
// Start with no scrollbar
scr.style.overflow = 'hidden';
// Inner content div
inn = document.createElement('div');
inn.style.width = '100%';
inn.style.height = '200px';
// Put the inner div in the scrolling div
scr.appendChild(inn);
// Append the scrolling div to the doc
document.body.appendChild(scr);
// Width of the inner div sans scrollbar
wNoScroll = inn.offsetWidth;
// Add the scrollbar
scr.style.overflow = 'auto';
// Width of the inner div width scrollbar
wScroll = inn.offsetWidth;
// Remove the scrolling div from the doc
document.body.removeChild(
document.body.lastChild);
// Pixel width of the scroller
return (wNoScroll - wScroll);
}
Edit: hauteur fixe.
Je le fais avec javascript (pas de bibliothèque) et CSS - le corps du tableau fait défiler avec la page, et le tableau ne doit pas nécessairement être de largeur ou de hauteur fixe, bien que chaque colonne ait une largeur. Vous pouvez également conserver la fonctionnalité de tri.
Fondamentalement:
En HTML, créez des divs de conteneur pour positionner la ligne d'en-tête de la table et le corps de la table , Créez également un div "masque" pour masquer le corps de la table pendant que Défile devant l'en-tête.
En CSS, convertissez les parties de la table en blocs
En Javascript, obtenez la largeur du tableau et faites correspondre celle du masque ... obtenez La hauteur du contenu de la page ... mesurez la position de défilement ... Manipulez CSS pour définir la position de la ligne d'en-tête du tableau et le masquela taille
Voici le javascript et une jsFiddle DEMO.
// get table width and match the mask width
function setMaskWidth() {
if (document.getElementById('mask') !==null) {
var tableWidth = document.getElementById('theTable').offsetWidth;
// match elements to the table width
document.getElementById('mask').style.width = tableWidth + "px";
}
}
function fixTop() {
// get height of page content
function getScrollY() {
var y = 0;
if( typeof ( window.pageYOffset ) == 'number' ) {
y = window.pageYOffset;
} else if ( document.body && ( document.body.scrollTop) ) {
y = document.body.scrollTop;
} else if ( document.documentElement && ( document.documentElement.scrollTop) ) {
y = document.documentElement.scrollTop;
}
return [y];
}
var y = getScrollY();
var y = y[0];
if (document.getElementById('mask') !==null) {
document.getElementById('mask').style.height = y + "px" ;
if (document.all && document.querySelector && !document.addEventListener) {
document.styleSheets[1].rules[0].style.top = y + "px" ;
} else {
document.styleSheets[1].cssRules[0].style.top = y + "px" ;
}
}
}
window.onscroll = function() {
setMaskWidth();
fixTop();
}
Si vous avez assez peu de normes;) vous pouvez placer une table qui ne contient qu'un en-tête directement au-dessus d'une table qui n'a qu'un corps. Il ne défilera pas horizontalement, mais si vous n'en avez pas besoin ...
Pour moi, rien de lié au défilement n'a vraiment fonctionné jusqu'à ce que je supprime la largeur du tableau CSS. A l'origine, la table CSS ressemblait à ceci:
.table-fill {
background: white;
border-radius:3px;
border-collapse: collapse;
margin: auto;
width: 100%;
max-width: 800px;
padding:5px;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
animation: float 5s infinite;
}
Dès que j'ai enlevé la largeur: 100%; toutes les fonctionnalités de défilement ont commencé à fonctionner.