web-dev-qa-db-fra.com

Table HTML avec en-têtes fixes et colonne fixe?

Existe-t-il une technique CSS/JavaScript permettant d’afficher un long tableau HTML de sorte que les en-têtes de colonne restent fixes à l’écran et que le premier colonne reste fixe et fasse défiler les données.

Je veux pouvoir faire défiler le contenu du tableau, mais pouvoir toujours 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 cela peut aider, le seul navigateur qui me tient à cœur est Firefox.

javascripthtmlcsshtml-table
57
koogunmo

Exemple de travail de lien posté par pranav :

http://jsbin.com/nolanole/1/edit?html,js,output

FYI: testé dans IE 6, 7 et 8 (mode de compatibilité activé ou désactivé), FF 3 et 3.5, Chrome 2. Pas d'écran-lecteur- friendly (les en-têtes ne font pas partie du tableau de contenu).

EDIT 5/5/14: exemple déplacé vers jsBin. Ceci est vieux, mais fonctionne étonnamment toujours dans Chrome, IE et Firefox (bien que IE et Firefox pourraient nécessiter quelques ajustements de la hauteur des lignes).

19
acatalept

Le plug-in jQuery DataTables 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" contient des outils pour les colonnes fixes et les en-têtes fixes.

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/
(Inclut un exemple avec une présentation de style de feuille de calcul pleine page: http://datatables.net/release-datatables/extras/FixedHeader/top_bottom_left_right.html )

3
mg1075

Vous pourriez être à la recherche de this .

Il a cependant quelques problèmes connus.

2
green_t

Je vois ceci, 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/

Cela fonctionne simplement sans configuration et est vraiment facile à installer.

2
raveren

Si vous voulez que les en-têtes restent en place pendant que les données du tableau défilent verticalement, vous devez implémenter un <tbody> avec le style "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 de <tbody> dépasse de la hauteur souhaitée, le défilement commence. Toutefois, les en-têtes resteront fixes en haut, quelle que soit la position du défilement.

1
levik

Dans cette réponse, il y a aussi la meilleure réponse que j'ai trouvée à votre question:

tableau HTML avec en-têtes fixes?

et basé sur du CSS pur .

1
Marco Demaio

J'ai créé quelque chose qui a en-tête fixe, pied de page fixe, colonne de gauche fixe et colonne de droite fixe. Cela ne fonctionne que très bien dans IE. Comme la plupart des utilisateurs utilisent toujours IE, cela peut être utile. Veuillez trouver le code ici dans Table déroulante) . Laissez-moi vos suggestions.

En attendant, je travaille à réparer les colonnes dans un autre navigateur. Je vous tiendrai au courant. :-)

0
Shahib

Pas tout à fait parfait, mais cela m’a rapproché de certaines des principales réponses ici.

Deux tables différentes, l’une avec l’en-tête et l’autre, entourées 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>
0
Ascherer
<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>
0
Pat