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

Je voudrais pouvoir "modifier" la présentation d'un tableau HTML pour ajouter une seule fonctionnalité: lorsque vous faites défiler la page vers le bas pour que le tableau soit à l'écran mais que les lignes d'en-tête soient hors écran, je voudrais que les en-têtes restent visible en haut de la zone de visualisation.

Ce serait conceptuellement comme la fonctionnalité «Figer les volets» dans Excel. Cependant, une page HTML peut contenir plusieurs tableaux et je souhaiterais que cela se produise uniquement pour le tableau qui est actuellement en vue, uniquement pendant qu'il est en vue.

Remarque: j'ai vu une solution où la zone de données de la table est rendue défilante tandis que les en-têtes ne défilent pas. Ce n'est pas la solution que je recherche.

Découvrez jQuery.floatThead ( démos disponibles ) qui est très cool, peut également fonctionner avec DataTables et peut même fonctionner à l'intérieur d'un overflow: autoconteneur.

J'ai créé une solution de preuve de concept en utilisant jQuery .

Voir un exemple ici.

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

Je suis conscient d'un problème avec ceci: si la table contient des ancres, et si vous ouvrez l'URL avec l'ancre spécifiée dans un navigateur, lorsque la page se charge, la ligne avec l'ancre sera probablement masquée par l'en-tête flottant.

Mise à jour du 11/12/2017: Je vois que cela ne fonctionne pas avec Firefox (57) et Chrome (63) actuels. Je ne sais pas quand et pourquoi cela a cessé de fonctionner, ni comment y remédier. Mais maintenant, je pense que la réponse acceptée par Hendy Irawan est supérieure.

Craig, j'ai raffiné un peu votre code (entre autres, il utilise maintenant position: fixed) et je l'ai enveloppé comme un plugin jQuery.

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

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

Si vous ciblez des navigateurs modernes compatibles css3 ( prise en charge du navigateur: https://caniuse.com/#feat=css-sticky ), vous pouvez utiliser position:sticky, qui ne nécessite pas JS et ne cassera pas la mise en page du tableau. et td de la même colonne. Il ne nécessite pas non plus de largeur de colonne fixe pour fonctionner correctement.

Exemple pour une seule ligne d'en-tête:

thead th
{
    position: sticky;
    top: 0px;
}

Pour les fils avec 1 ou 2 lignes, vous pouvez utiliser quelque chose comme ceci:

thead > :last-child th
{
    position: sticky;
    top: 30px; /* This is for all the the "th" elements in the second row, (in this casa is the last child element into the thead) */
}

thead > :first-child th
{
    position: sticky;
    top: 0px; /* This is for all the the "th" elements in the first child row */
}

Vous devrez peut-être jouer un peu avec la propriété supérieure du dernier enfant en modifiant le nombre de pixels pour correspondre à la hauteur de la première ligne (+ la marge + la bordure + le remplissage, le cas échéant), de sorte que la deuxième ligne reste juste en bas ci-dessous le premier.

De plus, les deux solutions fonctionnent même si vous avez plus d'un tableau dans la même page: l' thélément de chacun commence à être collant lorsque sa position supérieure est celle indiquée dans la définition css et disparaît simplement lorsque tout le tableau défile vers le bas. Donc, s'il y a plus de tables, toutes fonctionnent à merveille de la même manière.

Pourquoi utiliser le dernier enfant avant et le premier enfant après dans le css?

Parce que les règles css sont rendues par le navigateur dans le même ordre que vous les écrivez dans le fichier css et à cause de cela, si vous n'avez qu'une seule ligne dans l'élément thead, la première ligne est simultanément la dernière ligne aussi et la règle du premier enfant a besoin pour remplacer le dernier enfant. Sinon, vous aurez un décalage de la ligne 30 px par rapport à la marge supérieure, ce que je suppose que vous ne voulez pas.

Un problème de position connu: le sticky est qu'il ne fonctionne pas sur les éléments de tête ou les lignes du tableau: vous devez cibler les éléments. Ce problème sera résolu dans les futures versions du navigateur.

Alternatives possibles

js-floating-table-headers

js-floating-table-headers (Google Code)

Dans Drupal

J'ai un site Drupal 6. J'étais sur la page "modules" d'administration et j'ai remarqué que les tables avaient exactement cette fonctionnalité!

En regardant le code, il semble être implémenté par un fichier appelé tableheader.js. Il applique la fonctionnalité sur toutes les tables avec la classe sticky-enabled.

Pour un site Drupal, j'aimerais pouvoir en profiter tableheader.js module tel quel pour le contenu utilisateur. tableheader.jsne semble pas être présent sur les pages de contenu utilisateur dans Drupal. J'ai posté un message sur le forum pour demander comment modifier le thème Drupal afin qu'il soit disponible. Selon une réponse, tableheader.jspeut être ajouté à un thème Drupal en utilisant drupal_add_js()dans le thème template.phpcomme suit:

drupal_add_js('misc/tableheader.js', 'core');

J'ai rencontré ce problème très récemment. Malheureusement, j'ai dû faire 2 tableaux, un pour l'en-tête et un pour le corps. Ce n'est probablement pas la meilleure approche qui soit, mais voici:

<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 la manière élégante, mais cela fonctionne. Je vais enquêter pour voir si je peux faire quelque chose de mieux, mais cela permet plusieurs tables.

Allez lire sur la propriété de débordement pour voir si cela répond à vos besoins

C'est vraiment une chose délicate d'avoir un en-tête collant sur votre table. J'avais la même exigence mais avec asp: GridView et puis j'ai trouvé qu'il pensait vraiment avoir un en-tête collant sur gridview. Il existe de nombreuses solutions disponibles et il m'a fallu 3 jours pour essayer toutes les solutions mais aucune d'elles ne pouvait satisfaire.

Le problème principal auquel j'ai été confronté avec la plupart de ces solutions était le problème d'alignement. Lorsque vous essayez de faire flotter l'en-tête, l'alignement des cellules d'en-tête et des cellules du corps se déforme.

Avec certaines solutions, j'ai également eu un problème de chevauchement de l'en-tête sur les premières lignes du corps, ce qui fait que les lignes du corps sont cachées derrière l'en-tête flottant.

Alors maintenant, je devais mettre en œuvre ma propre logique pour y parvenir, même si je ne considère pas non plus cela comme une solution parfaite, mais cela pourrait également être utile pour quelqu'un,

Voici l'exemple de tableau.

<div class="table-holder">
        <table id="MyTable" cellpadding="4" cellspacing="0" border="1px" class="customerTable">
            <thead>
                <tr><th>ID</th><th>First Name</th><th>Last Name</th><th>DOB</th><th>Place</th></tr>
            </thead>
            <tbody>
                <tr><td>1</td><td>Customer1</td><td>LastName</td><td>1-1-1</td><td>SUN</td></tr>
                <tr><td>2</td><td>Customer2</td><td>LastName</td><td>2-2-2</td><td>Earth</td></tr>
                <tr><td>3</td><td>Customer3</td><td>LastName</td><td>3-3-3</td><td>Mars</td></tr>
                <tr><td>4</td><td>Customer4</td><td>LastName</td><td>4-4-4</td><td>Venus</td></tr>
                <tr><td>5</td><td>Customer5</td><td>LastName</td><td>5-5-5</td><td>Saturn</td></tr>
                <tr><td>6</td><td>Customer6</td><td>LastName</td><td>6-6-6</td><td>Jupitor</td></tr>
                <tr><td>7</td><td>Customer7</td><td>LastName</td><td>7-7-7</td><td>Mercury</td></tr>
                <tr><td>8</td><td>Customer8</td><td>LastName</td><td>8-8-8</td><td>Moon</td></tr>
                <tr><td>9</td><td>Customer9</td><td>LastName</td><td>9-9-9</td><td>Uranus</td></tr>
                <tr><td>10</td><td>Customer10</td><td>LastName</td><td>10-10-10</td><td>Neptune</td></tr>
            </tbody>
        </table>
    </div>

Remarque : La table est enveloppée dans un DIV avec un attribut de classe égal à 'table-holder'.

Vous trouverez ci-dessous le script JQuery que j'ai ajouté dans mon en-tête de page html.

<script src="../Scripts/jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="../Scripts/jquery-ui.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function () {
        //create var for table holder
        var originalTableHolder = $(".table-holder");
        // set the table holder's with
        originalTableHolder.width($('table', originalTableHolder).width() + 17);
        // Create a clone of table holder DIV
        var clonedtableHolder = originalTableHolder.clone();

        // Calculate height of all header rows.
        var headerHeight = 0;
        $('thead', originalTableHolder).each(function (index, element) {
            headerHeight = headerHeight + $(element).height();
        });

        // Set the position of cloned table so that cloned table overlapped the original
        clonedtableHolder.css('position', 'relative');
        clonedtableHolder.css('top', headerHeight + 'px');

        // Set the height of cloned header equal to header height only so that body is not visible of cloned header
        clonedtableHolder.height(headerHeight);
        clonedtableHolder.css('overflow', 'hidden');

        // reset the ID attribute of each element in cloned table
        $('*', clonedtableHolder).each(function (index, element) {
            if ($(element).attr('id')) {
                $(element).attr('id', $(element).attr('id') + '_Cloned');
            }
        });

        originalTableHolder.css('border-bottom', '1px solid #aaa');

        // Place the cloned table holder before original one
        originalTableHolder.before(clonedtableHolder);
    });
</script>

et enfin ci-dessous se trouve la classe CSS à des fins de coloration.

.table-holder
{
    height:200px;
    overflow:auto;
    border-width:0px;    
}

.customerTable thead
{
    background: #4b6c9e;        
    color:White;
}

Donc, toute l'idée de cette logique est de placer la table dans un div de support de table et de créer un clone de ce support côté client lorsque la page est chargée. Cachez maintenant le corps du tableau dans le support de clone et placez la partie d'en-tête restante sur l'en-tête d'origine.

La même solution fonctionne également pour asp: gridview, vous devez ajouter deux étapes supplémentaires pour y parvenir dans gridview,

1. Dans l'événement OnPrerender de l'objet gridview dans votre page Web, définissez la section de tableau de la ligne d'en-tête égale à TableHeader.

   if (this.HeaderRow != null)
   {
       this.HeaderRow.TableSection = TableRowSection.TableHeader;
   }

2. Et enveloppez votre grille dans <div class="table-holder"></div>.

Remarque : si votre en-tête a des contrôles cliquables, vous devrez peut-être ajouter un script jQuery supplémentaire pour transmettre les événements déclenchés dans l'en-tête cloné à l'en-tête d'origine. Ce code est déjà disponible dans le plugin jQuery sticky-header créé par jmosbech

Utilisation display: fixedsur lethead section devrait fonctionner, mais pour cela ne fonctionne que sur la table actuelle en vue, vous aurez besoin de l'aide de JavaScript. Et ce sera délicat car il faudra déterminer les emplacements de défilement et l'emplacement des éléments par rapport à la fenêtre, qui est l'un des principaux domaines d'incompatibilité du navigateur.

Jetez un œil aux frameworks JavaScript populaires (jQuery, MooTools, YUI, etc.) pour voir s'ils peuvent soit faire ce que vous voulez, soit faciliter ce que vous voulez.

Si vous utilisez un tableau en plein écran, vous voudrez peut-être configurer th pour afficher: fixed; et haut: 0; ou essayez une approche très similaire via css.

Mettre à jour

Créez rapidement une solution fonctionnelle avec les iframes (html4.0). Cet exemple N'EST PAS conforme à la norme, mais vous pourrez facilement le corriger:

external.html

<?xml version='1.0' encoding='UTF-8'?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">   
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">     
    <head>      
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />   
        <title>Outer</title>
  <body>
    <iframe src="test.html" width="200" height="100"></iframe>
    </body>
</html> 

test.html

<?xml version='1.0' encoding='UTF-8'?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">   
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">     
    <head>      
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />   
        <title>Floating</title>
    <style type="text/css">
      .content{
        position:relative; 
      }

      thead{
        background-color:red;
        position:fixed; 
        top:0;
      }
    </style>
  <body>
    <div class="content">      
      <table>
        <thead>
          <tr class="top"><td>Title</td></tr>
        </head>
        <tbody>
          <tr><td>a</td></tr>
          <tr><td>b</td></tr>
          <tr><td>c</td></tr>
          <tr><td>d</td></tr>
          <tr><td>e</td></tr>
          <tr><td>e</td></tr>
          <tr><td>e</td></tr>
          <tr><td>e</td></tr>
          <tr><td>e</td></tr>
          <tr><td>e</td></tr>
        </tbody>
      </table>
    </div>
    </body>
</html> 

La réponse la plus simple en utilisant uniquement CSS: D !!!

table {
  /* Not required only for visualizing */
  border-collapse: collapse;
  width: 100%;
}

table thead tr th {
  /* you could also change td instead th depending your html code */
  background-color: green;
  position: sticky;
  z-index: 100;
  top: 0;
}

td {
  /* Not required only for visualizing */
  padding: 1em;
}

<table>
  <thead>
    <tr>
      <th>Col1</th>
      <th>Col2</th>
      <th>Col3</th>
    </tr>
  </thead>
  <tbody>
     <tr>
       <td>data</td>
       <td>data</td>
       <td>data</td>
     </tr>
     <tr>
       <td>data</td>
       <td>data</td>
       <td>data</td>
     </tr>
     <tr>
       <td>data</td>
       <td>data</td>
       <td>data</td>
     </tr>
     <tr>
       <td>data</td>
       <td>data</td>
       <td>data</td>
     </tr>
     <tr>
       <td>data</td>
       <td>data</td>
       <td>data</td>
     </tr>
     <tr>
       <td>data</td>
       <td>data</td>
       <td>data</td>
     </tr>
     <tr>
       <td>data</td>
       <td>data</td>
       <td>data</td>
     </tr>
     <tr>
       <td>data</td>
       <td>data</td>
       <td>data</td>
     </tr>
     <tr>
       <td>data</td>
       <td>data</td>
       <td>data</td>
     </tr>
     <tr>
       <td>data</td>
       <td>data</td>
       <td>data</td>
     </tr>
     <tr>
       <td>data</td>
       <td>data</td>
       <td>data</td>
     </tr>
     <tr>
       <td>data</td>
       <td>data</td>
       <td>data</td>
     </tr>
     <tr>
       <td>data</td>
       <td>data</td>
       <td>data</td>
     </tr>
     <tr>
       <td>data</td>
       <td>data</td>
       <td>data</td>
     </tr>
     <tr>
       <td>david</td>
       <td>castro</td>
       <td>rocks!</td>
     </tr>
  </tbody>
</table>

Cette preuve de concept que vous avez faite était géniale! Cependant j'ai aussi trouvé ce plugin jQuery qui semble très bien fonctionner. J'espère que ça aide!

Il est frustrant que ce qui fonctionne bien dans un navigateur ne fonctionne pas dans d'autres. Ce qui suit fonctionne dans Firefox, mais pas dans Chrome ou IE:

<table width="80%">

 <thead>

 <tr>
  <th>Column 1</th>
  <th>Column 2</th>
  <th>Column 3</th>
 </tr>

 </thead>

 <tbody style="height:50px; overflow:auto">

  <tr>
    <td>Cell A1</td>
    <td>Cell B1</td>
    <td>Cell C1</td>
  </tr>

  <tr>
    <td>Cell A2</td>
    <td>Cell B2</td>
    <td>Cell C2</td>
  </tr>

  <tr>
    <td>Cell A3</td>
    <td>Cell B3</td>
    <td>Cell C3</td>
  </tr>

 </tbody>

</table>