Table HTML avec des en-têtes fixes et une colonne fixe? [fermé]
y a-t-il une technique CSS/JavaScript pour afficher une longue table HTML telle que les en-têtes de colonne restent fixes sur l'écran et la première colonne reste fixe et font défiler les données.
je veux être en mesure de faire défiler le contenu du tableau, mais pour toujours être en mesure de voir les en-têtes de colonne en haut et la première colonne à gauche.
S'il y a un plugin jQuery ce serait génial! Si elle aide le seul navigateur que j'intéresse Firefox.
13 réponses
exemple pratique de lien publié par pranav :
http://jsbin.com/nolanole/1/edit?html,js, sortie
FYI: testé en IE 6, 7, & 8 (mode de compatibilité activé ou désactivé), FF 3 & 3.5, Chrome 2. Pas facile à lire à l'écran (les en-têtes ne font pas partie de la table de contenu).
MODIFIER 5/5/14: déplacement d'un exemple de jsBin. C'est vieux, mais étonnamment fonctionne toujours dans le Chrome actuel, IE, et Firefox (bien que IE et Firefox puissent avoir besoin de quelques ajustements à la hauteur des rangs).
le "jQuery DataTables plug-in est un excellent moyen de réaliser des colonnes et des en-têtes fixes de type excel.
notez la section Exemples du site et les"extras".
http://datatables.net/examples/
http://datatables.net/extras /
la section" Extras " comprend des outils pour colonnes fixes et fixe les en-têtes.
colonnes fixes
http://datatables.net/extras/fixedcolumns/
(Je crois que l'exemple de cette page est celui qui convient le mieux à votre question.)
en-tête fixe
http://datatables.net/extras/fixedheader/
(Comprend un exemple avec une mise en page de type tableur pleine page: http://datatables.net/release-datatables/extras/FixedHeader/top_bottom_left_right.html )
je vois bien qu'une vieille question, est un très bon endroit pour brancher mon propre script:
http://code.google.com/p/js-scroll-table-header /
il fonctionne simplement sans configuration et est vraiment facile à configurer.
si ce que vous voulez est d'avoir les en-têtes rester en place pendant que les données dans la table défilent verticalement, vous devriez mettre en œuvre un < tbody> style avec "overflow-y: auto" comme ceci:
<table>
<thead>
<tr>
<th>Header1</th>
. . .
</tr>
</thead>
<tbody style="height: 300px; overflow-y: auto">
<tr>
. . .
</tr>
. . .
</tbody>
</table>
si le contenu
croît plus haut que la hauteur désirée, il commencera à défiler. Cependant, les en-têtes resteront fixes en haut, quelle que soit la position du rouleau.dans cette réponse, il y a aussi la meilleure réponse que j'ai trouvée à votre question:
et basé sur CSS pur .
j'ai créé quelque chose qui a un en-tête fixe, un pied de page fixe, une colonne de gauche fixe et aussi une colonne de droite fixe. Cela ne fonctionne bien en IE. Comme la plupart des utilisateurs utilisent encore IE cela peut être utile. S'il vous plaît trouver le code ici dans tableau déroulable . S'il vous plaît laissez-moi vos suggestions.
pendant ce temps je travaille pour fixer les colonnes dans un autre navigateur. Je vous tiendrai au courant. :- )
<script>
$(document).ready(function () {
$("#GridHeader table").html($('#<%= GridView1.ClientID %>').html());
$("#GridHeader table tbody .rows").remove();
$('#<%= GridView1.ClientID %> tr:first th').hide();
});
</script>
<div id="GridHeader">
<table></table>
</div>
<div style="overflow: auto; height:400px;">
<asp:GridView ID="GridView1" runat="server" />
</div>
pas tout à fait parfait, mais ça m'a permis de me rapprocher de certaines des meilleures réponses ici.
deux tableaux différents, l'un avec l'en-tête, et l'autre, enveloppé d'un div avec le contenu
<table>
<thead>
<tr><th>Stuff</th><th>Second Stuff</th></tr>
</thead>
</table>
<div style="height: 600px; overflow: auto;">
<table>
<tbody>
//Table
</tbody>
</table>
</div>
Je ne sais pas si YUI DT a cette fonctionnalité, mais je ne serai pas surpris si c'est le cas.
je sais que vous pouvez faire pour MSIE et cela a limité l'exemple semble fonctionner pour firefox (pas sûr de la façon extensible, la technique est).
la première colonne a une barre de défilement sur la cellule juste au-dessous des en-têtes
<table>
<thead>
<th> Header 1</th>
<th> Header 2</th>
<th> Header 3</th>
</thead>
<tbody>
<tr>
<td>
<div style="width: 50; height:30; overflow-y: scroll">
Tklasdjf alksjf asjdfk jsadfl kajsdl fjasdk fljsaldk
fjlksa djflkasjdflkjsadlkf jsakldjfasdjfklasjdflkjasdlkfjaslkdfjasdf
</div>
</td>
<td>
Hello world
</td>
<td> Hello world2
</tr>
</tbody>
</table>
voici un bon plugin jQuery, qui fonctionne sur tous les navigateurs!
vous avez une table d'en-tête fixe Sans fixer sa largeur.
Check it: https://github.com/benjaminleouzon/tablefixedheader
Avertissement: je suis l'auteur du plugin.