[Résolu] Table déroulante avec en-tête fixe

Bonjour à tous
Je cherche la "meilleure" façon de faire une table déroulante avec en-tête fixe, similaire par exemple à ce qu'affiche Windows quand on veut ouvrir un fichier.

<table>
    <thead>.....</thead>
    <tbody>
        <tr>....</tr>
        <tr>....</tr>
        ................
    </tbody>
</table>

J'ai trouvé de nombreuses solutions sur le Web, dont beaucoup ne fonctionnent pas, semble-t-il, par exemple déclarer le <tbody> en overflow:auto;
Une autre solution serait de mettre la <table> dans une <div> en overflow:auto; et de mettre une "copie" du <thead> en fixed, mais comment s'assurer que cette copie soit réellement fidèle, avec les bonnes largeurs de cellules?
Plutôt que de poursuivre les tâtonnements, pourriez vous me donner votre avis sur ce sujet?

Merci de vos conseils

sepecat a écrit :

Euh... à tout hasard cela ne s'appellerait pas une combo box, du genre SELECT en HTML ?
Parce que, lorsque je veux ouvrir un fichier, c'est bien ce que Windows me propose.

Sans doute, je n'y avais pas pensé, mais un SELECT avec plusieurs colonnes, redimensionnables en largeur qui plus est, avec la possibilité de trier les lignes selon divers critères, je vois mal comment faire marcher ça.
Mais, parmi les "solutions qui ne marchent pas" citées plus haut, j'ai revu http://jsfiddle.net/CrSpu/ et ça semble convenir à mes besoins.

J'ai finalement choisi une solution un peu lourde, mais qui semble donner satisfaction.
Le principe, c'est de générer par JS la structure suivante:

<div id="content">
  <header class="listHeader">
    <ul>
      <li>...</li>
      <li>...</li>
      <li>...</li>
      <li>...</li>
    </ul>
  </header>
  <div class="itemList">
    <table>
      <tr>...</tr>
      <tr>...</tr>
      <tr>...</tr>
      ............
    </table>
  </div>
</div>

et le CSS:

header.listHeader ul {width:100%;}
header.listHeader li {
  list-style-type:none;
  display:inline-block;
  white-space:nowrap;
}
div.itemList {
  width:100%;
  max-height:20em;
  overflow-y:auto;
}
table {width:100%;}

L'ajustement de la largeur des <li> à celle des colonnes de la table se fait par JS:

 var content = document.getElementById('content');
var header = content.getElementsByTagName('header')[0];
var items = header.getElementsByTagName('li');
var firstRow = content.getElementsByTagName('tr')[0];
var firstCells = firstRow.getElementsByTagName('td');
for(var i = 0; i < firstCells.length; i++) {
  var cell = firstCells[i];
  var rect = cell.getBoundingClientRect();
  var item = items[i];
  item.style.width = rect.width + 'px';
}

On peut sans doute faire mieux, mais j'en reste là
Modifié par PapyJP (14 Aug 2017 - 11:43)