185 votes

Craig McQueen avatar

En-têtes de tableau HTML toujours visibles en haut de la fenêtre lors de l'affichage d'une grande table

Demandé el 23 de Juin, 2009
Quand la question a-t-elle été
78512 affichage
Nombre de visites la question a
5 Réponses
Nombre de réponses aux questions
Résolu
Situation réelle de la question

Je voudrais être en mesure de "bidouiller" un tableau HTML de présentation pour ajouter une fonctionnalité unique: lorsque vous faites défiler vers le bas par le biais de la page de sorte que la table est sur l'écran, mais les lignes d'en-tête sont hors de l'écran, je voudrais les en-têtes de rester visible en haut de la zone d'affichage.

Ce serait conceptuellement comme le "figer les volets" dans Excel. Cependant, une page HTML peut contenir plusieurs tables en elle et je ne le souhaitez arriver pour la table, qui est actuellement en vue, uniquement lorsqu'il est en vue.

Note: j'ai vu une solution, lorsque les données de la table zone de défilement, tandis que les en-têtes ne se défile pas. Ce n'est pas la solution, je suis à la recherche d'.

Demandé el 23 de Juin, 2009 par Craig McQueen

Réponses

Trop de publicités?

136voto

Craig McQueen avatar
Craig McQueen Points 13194

J'ai fait une preuve de concept de la solution à l'aide de jQuery.

Voir un exemple ici.

Maintenant j'ai ce code dans un Mercurial bitbucket référentiel. Le fichier principal est tables.html.

Mise à jour: je suis conscient d'un problème avec ceci: si la table contient des ancres, et si vous ouvrez l'URL avec l'ancre dans un navigateur, lorsque le chargement de la page, la ligne avec l'ancre sera probablement masqué par le flottant en-tête.

Répondu el 25 de Juin, 2009 par Craig McQueen (13194 Points )

70voto

Hendy Irawan avatar
Hendy Irawan Points 4635

Consultez jQuery.floatThead (démos disponibles) qui est très cool, peut travailler avec les tables de données trop, et peut même travailler à l’intérieur un `` conteneur.

Répondu el 2 de Octobre, 2013 par Hendy Irawan (4635 Points )

67voto

jmosbech avatar
jmosbech Points 890

Craig, j'ai raffiné un peu votre code (parmi quelques autres choses, il utilise maintenant position: fixed) et l'a intégré dans un plugin jQuery.

Essayez-le ici: http://jsfiddle.net/jmosbech/stFcx/

Et obtenez la source ici: https://github.com/jmosbech/StickyTableHeaders

Répondu el 10 de Octobre, 2011 par jmosbech (890 Points )

16voto

Tarek Loubani avatar
Tarek Loubani Points 143

J'ai mis en place @jmosbech de la solution. Une seule modification que j'ai faite a été de cibler l' <thead> balise au lieu de l' <th> ou <tr>.

Vous pouvez voir la version de travail ici:

http://jsfiddle.net/stFcx/72/

La seule différence était en train de changer tr:first de thead:first. Ce changement permet à plusieurs en-têtes de ligne, comme illustré dans l'exemple.

Répondu el 26 de Novembre, 2011 par Tarek Loubani (143 Points )

5voto

Gab Royer avatar
Gab Royer Points 4209

J'ai rencontré ce problème très récemment. Malheureusement, j'ai dû faire 2 tables, l'une pour la tête et l'autre pour le corps. Ce n'est probablement pas la meilleure approche à jamais, mais va ici:

<html>
<head>
<title>oh hai</title>
</head>
<body>
<table id="tableHeader">
  <tr>
    <th style="width:100px; background-color:#CCCCCC">col header</th>
    <th style="width:100px; background-color:#CCCCCC">col header</th>
  </tr>
</table>
<div style="height:50px; overflow:auto; width:250px">
  <table>
    <tr>
      <td style="height:50px; width:100px; background-color:#DDDDDD">data1</td>
      <td style="height:50px; width:100px; background-color:#DDDDDD">data1</td>
    </tr>
    <tr>
      <td style="height:50px; width:100px; background-color:#DDDDDD">data2</td>
      <td style="height:50px; width:100px; background-color:#DDDDDD">data2</td>
    </tr>
  </table>
</div>
</body>
</html>

Cela a fonctionné pour moi, ce n'est probablement pas le moyen élégant mais il fonctionne. Je vais étudier afin de voir si je peux faire quelque chose de mieux, mais il permet l'utilisation de plusieurs tables.

Allez lire sur le dépassement de la bienséance pour voir si cela correspond à votre besoin

Répondu el 23 de Juin, 2009 par Gab Royer (4209 Points )

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

Yandex
X