Bonjour,
 
Voilà, j'ai un tableau assez long (faut scroller, environ 90 lignes) qui contient un gros formulaire avec pleins de cases à cocher (c'est un planning de présences). Mon pb est que d'un point de vue ergonomie, quand on n'a plus les entêtes des colonnes affichées parce qu'on a scrollé, ben c'est pas très pratique et on peut faire des erreurs. Je voudrais donc pouvoir réafficher les entêtes quand ceux-ci ne sont plus visibles. Je sais que ça va se faire en JS et j'avais envie de partir sur une <div> qui s'affiche, par-dessus mon tableau quand on a scrollé jusqu'à un certain niveau, les <th> disparus. Mais mon principal pb est que les colonnes n'ont pas la même largeur
 
Auriez-vous une solution?
 
Merci

Un élément de réponse peut-être tbody + overflow :  
http://forum.alsacreations.com/top [...] rflow.html
 
Je vais tester...

Bon, c'est bon, ça marche
<thead> dans lequel je mets mes colonnes servant d'entête (<tr> et <th> )
<tbody> dans lequel je mets le contenu de mon tableau (<tr> et <td> )
 
Et en css :
tbody {
  height: 400px;
  overflow-y : auto;
  overflow-x : hidden;
}
 
Et sur les <td> de la dernière colonne, pour par que la scrollbar cache les données :
td.lastCol {
  padding-right: 20px;
}

ca ne marche que si tu fais un table de hauteur fixe, pas forcement pratique pour un impression (a moins de mettre un css <style media="print">avec tbody{height:auto;})
 
en js c'est aussi tres simple, il suffit de detecter si la position originale du thead est < viewport et si la fin du tbody est > thead(tu peux la stocker dans .data en jquery). dans ce cas tu passes sa position a {top:0px;position:static;}
 
[edit]
tu peux detecter sur $(window).scroll() en jquery mais je recommande d'utiliser un debounce dans ce cas.
[/edit]

Le tableau n'est pas destiné à être imprimé, donc pas gênant.
 
Merci pour la solution en JS.