Barre de défilement de la table d'en-tête fixe HTML
Duplicata possible:
tableau HTML avec en-têtes fixes?
J'ai essayé plusieurs méthodes pour obtenir une barre de défilement à partir d'un tableau HTML avec un en-tête fixe mais je n'ai pas eu de chance. Je pense que j'ai besoin d'une solution où l'en-tête est en quelque sorte "attaché" au corps de la table (plutôt que la solution de table imbriquée typique). Chaque solution que j'ai essayée gâche la largeur des colonnes d'en-tête et des colonnes de corps. En d'autres termes, ils se désynchronisent et les colonnes de l'en-tête ne s'alignent pas correctement avec celles de la table de défilement. Les largeurs des en-têtes et des colonnes varient d'une colonne à l'autre.
Y a-t-il un moyen pour moi d'y parvenir? Je préfère ne pas utiliser JavaScript. Oh, et j'ai besoin que cela fonctionne aussi dans Internet Explorer.
Mise à jour : Il est assez important pour moi d'obtenir cette fonctionnalité. J'ai besoin de l'en-tête fixe pour les en-têtes de colonne et de ligne les deux. Jusqu'à présent, aucune solution n'a fonctionné correctement. J'ai envisagé de faire des en-têtes des tables séparées, mais cela ne fonctionnerait pas lors du défilement car les en-têtes resteraient fixes.
Il semble qu'il y aurait de nombreux cas d'utilisation pour les en-têtes HTML fixes, il est donc surprenant pour moi qu'il n'y ait pas de solution adéquate.
(Oh, et j'ai essayé l'option suggérée par opatut dans le lien, mais cela ne fonctionne pas dans tous les navigateurs et j'ai besoin de ce travail dans Internet Explorer, Firefox et Chrome. Si cela ne fonctionne pas dans Internet Explorer 6, c'est OK) .
Oh, et si je dois fixer les largeurs de colonnes ou les hauteurs de lignes, c'est OK aussi, je serais juste heureux d'avoir un tableau HTML d'en-tête fixe fonctionnel (cross-browser).
J'ai une solution qui est une pure solution CSS et permet à la table d'être de largeur normale et variable. Il s'agit d'une nouvelle solution et présente certains problèmes en fonction de la conception de vos en-têtes. La bonne nouvelle est que si vos en-têtes sont alignés à gauche ou que vos colonnes ont une largeur fixe, cela devrait aller. Il y a quelques bugs visuels dans IE6, et j'ai trouvé que certaines cellules ont besoin d'une largeur minimale pour garder les en-têtes montrant si le contenu de la colonne est moins large que l'en-tête. Tous les problèmes sont visuels, donc si cela semble bon, vous avez terminé. Le corps du tableau est totalement normal, et comme il n'y a pas de JavaScript, vous n'avez rien à faire si l'utilisateur redimensionne la page.
Découvrez ma solution et laissez-moi un commentaire http://salzerdesign.com/blog/?p=191
Je sais que vous essayez d'éviter Javascript, mais j'étais exactement dans le même bateau que vous (luttant avec quoi faire pendant des jours pour relever le défi exact d'une nouvelle application) et j'ai résolu le problème en environ 10 minutes une fois que j'ai trouvé les tables de données:
Exemple de travail d'une solution: http://www.datatables.net/examples/basic_init/scroll_y.html
Il correspond exactement à chaque fois aux colonnes d'en-tête et de corps dans le sens de la largeur. Les largeurs peuvent être spécifiées, mais elles sont également suffisamment intelligentes pour la taille automatique. La mise en évidence et le tri des colonnes sont pris en charge par défaut à l'aide de l'exemple de CSS fourni. Passer à un modèle paginé (ce que j'ai fini par utiliser) est une seule ligne de code. Et .... la meilleure partie - si vous craignez que votre utilisateur n'ait pas activé Javascript, il se dégrade parfaitement en tableaux HTML conformes aux normes. À mon humble avis, c'est la solution la moins douloureuse et la plus riche en fonctionnalités qui prend entièrement en charge IE.
Si cela vous fait vous sentir mieux, j'ai utilisé cette solution à la fois sur un site gouvernemental (militaire) et sur les sites Web d'une banque internationale .... les clients les plus exigeants et les plus stricts que j'ai jamais rencontrés ... et les deux étaient extrêmement satisfait des résultats.
Ma première réponse n'a pas tenté de corriger les deux en-têtes et colonnes. Voici un exemple qui devrait fonctionner dans tous les navigateurs classiques (mais il peut nécessiter quelques ajustements).
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<style>
th { text-align: center; border: 1px solid black; padding:3px; }
td { text-align: center; border: 1px solid black; padding:3px; }
th.c1, td.c1 { width: 100px; }
th.c2, td.c2 { width: 150px; }
th.c3, td.c3 { width: 60px; }
th.c4, td.c4 { width: 100px; }
th.c5, td.c5 { width: 150px; }
th.c6, td.c6 { width: 60px; }
#rowScroll { height: 100px; } /* Subtract the scrollbar height */
#contentScroll { height: 100px; width: 300px; }
#colScroll { width: 272px; } /* Subtract the scrollbar width */
</style>
<table cellspacing="0" cellpadding="0" style="float: left;" style="width:300px; height:100px;" >
<tr>
<td id="void" style="border: 0;">
</td>
<td id="rowHeaders" style="border: 0;">
<div id="colScroll" style="overflow-x:hidden;">
<table cellspacing="0" cellpadding="0" style="width: 600px;">
<tr>
<th class="c1">A</th>
<th class="c2">B</th>
<th class="c3">C</th>
<th class="c4">D</th>
<th class="c5">E</th>
<th class="c6">F</th>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td id="colHeaders" style="border: 0;">
<div id="rowScroll" style="overflow-y:hidden">
<table cellspacing="0" cellpadding="0">
<tr><td>R1</td></tr>
<tr><td>R2</td></tr>
<tr><td>R3</td></tr>
<tr><td>R4</td></tr>
<tr><td>R5</td></tr>
<tr><td>R6</td></tr>
<tr><td>R7</td></tr>
<tr><td>R8</td></tr>
<tr><td>R9</td></tr>
</table>
</div>
</td>
<td id="content" style="border: 0;">
<div id="contentScroll" style="overflow:auto">
<table cellspacing="0" cellpadding="0" style="width: 600px;">
<tr><td class="c1">A1</td><td class="c2">B1</td><td class="c3">C1</td><td class="c4">D1</td><td class="c5">E1</td><td class="c6">F1</td></tr>
<tr><td class="c1">A2</td><td class="c2">B2</td><td class="c3">C2</td><td class="c4">D2</td><td class="c5">E2</td><td class="c6">F2</td></tr>
<tr><td class="c1">A3</td><td class="c2">B3</td><td class="c3">C3</td><td class="c4">D3</td><td class="c5">E3</td><td class="c6">F3</td></tr>
<tr><td class="c1">A4</td><td class="c2">B4</td><td class="c3">C4</td><td class="c4">D4</td><td class="c5">E4</td><td class="c6">F4</td></tr>
<tr><td class="c1">A5</td><td class="c2">B5</td><td class="c3">C5</td><td class="c4">D5</td><td class="c5">E5</td><td class="c6">F5</td></tr>
<tr><td class="c1">A6</td><td class="c2">B6</td><td class="c3">C6</td><td class="c4">D6</td><td class="c5">E6</td><td class="c6">F6</td></tr>
<tr><td class="c1">A7</td><td class="c2">B7</td><td class="c3">C7</td><td class="c4">D7</td><td class="c5">E7</td><td class="c6">F7</td></tr>
<tr><td class="c1">A8</td><td class="c2">B8</td><td class="c3">C8</td><td class="c4">D8</td><td class="c5">E8</td><td class="c6">F8</td></tr>
<tr><td class="c1">A9</td><td class="c2">B9</td><td class="c3">C9</td><td class="c4">D9</td><td class="c5">E9</td><td class="c6">F9</td></tr>
</table>
</div>
</td>
</tr>
</table>
<script src="../js/jquery-1.4.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
var content = $("#contentScroll");
var headers = $("#colScroll");
var rows = $("#rowScroll");
content.scroll(function () {
headers.scrollLeft(content.scrollLeft());
rows.scrollTop(content.scrollTop());
});
</script>
</body>
</html>
Essayez ma solution, elle est sans bug et optimisée pour les performances (sans sacrifier les fonctionnalités):
http://code.google.com/p/js-scroll-table-header/
Si vous l'essayez et avez besoin d'aide, demandez simplement, je suis l'auteur.
C'est un peu trop de code à mettre ici directement, mais au final, vous aurez au moins besoin de CSS lourds pour cela. L'utilisation de javascript et jQuery peut alléger cela, donc je vais inclure des liens vers les deux méthodes.
HTML + CSS uniquement
Vous pouvez utiliser la source sur cette page pour copier un exemple de la façon dont vous pouvez faire exactement ce que vous demandez via CSS et HTML. Cela est signalé comme fonctionnant dans à peu près tous les navigateurs actuels (Opera 7.x + (All Platforms), Mozilla 1.x + (All Platforms), IE 6.x + (Windows), Safari 1.x + (MacOS), Konqueror 3.x + (Linux / BSD)), mais si vous devez revenir à IE 5.x, cela commence à échouer.
Javascript/jQuery
Si vous décidez que vous êtes prêt à inclure Javascript et jQuery, il existe une deuxième option qui semble un peu plus simple à mettre en œuvre: cet article de blog montre comment.
Tout ce que j'ai trouvé a besoin de valeurs fixes pour la largeur et la hauteur des cellules, donc si vous voulez le garder dynamique, vous êtes bloqué avec JavaScript.
Une solution que j'aime est celle-ci, mais vous devez définir une largeur pour chaque colonne. "En-têtes fixes dans les grands tableaux HTML à The Code Project .
Si vous ne souhaitez pas utiliser JavaScript, vous pouvez peut-être définir les largeurs de colonne fixes avec PHP. Je déterminerais la longueur de chaîne moyenne des cellules pour obtenir la largeur de colonne:
column_width = column_average / (all_cells_average * column_count) * table_width
Vous pouvez utiliser DataTables sans JavaScript. Il n'aura pas de tri, mais la table, les en-têtes et les divisions qui les hébergent fonctionneront. Il suffit de regarder la source de la page - elle a 3 divisions chacune avec un tableau avec des largeurs identiques dans la tête. Le haut et le bas fournissent simplement l'en-tête et le pied de page et celui du milieu fournit des données. C'est en fait assez proche de votre idée d'origine que vous devez séparer ces pièces.