28172 sujets

CSS et mise en forme, CSS3

Bonjour à tous,

Je cherche depuis un petit bout de temps à faire un tableau qui possède un header fixe.
CAD que lorsque l'on défile la page, le header du tableau reste en position; tout le reste de la page défile.

Sur le net je n'ai trouvé que des solutions pour avoir un header fixe sur un body d'une certaine taille possédant une scrollbar, cette solution est moche car on se retrouve alors avec 2 scrollbars, une pour la page et une pour le tableau ...

Est-ce possible sans javascript ?

Aujourd'hui je tentais (exemple bidon)

<table border="0" cellpadding="0" cellspacing="0">
<thead style="position:fixed">
  <tr>
    <th style="width:200px"> Titre 1 </th>
    <th style="width:200px"> Titre 2 </th>
    <th> Titre 3 </th>
    <th> Titre 4 </th>
  </tr>
</thead
<tbody>
  <tr>
    <td> Bla </td>
    <td> Blouou </td>
    <td> blibliblibli </td>
    <td> blow </td>
  </tr>
</tbody>
</table>


Le thead devient bien fixe, mais les cellules du tbody n'hérite plus de la largeur des cellules du thead
Je pourrais bien sure passer par un JS qui prendrais la taille de chacune de mes cellules de header et qui positionnerai la taille sur la première ligne de TD, mais c'est lourd et pour bien faire il faudrait vérifier qu'il n'y a pas de TD plus grand que mes TH ...
Bonjour,

Ça se gère en CSS avec position: fixed (compatible tous navigateurs sauf IE6). Par contre, je ne suis pas sûr que ça soit utilisable facilement (ou utilisable tout court) pour des lignes ou cellules de tableau. Et si le tableau est un peu large (plus de 700px de large par exemple), c'est plutôt déconseillé. Le positionnement fixe a des effets secondaires, propres à sa nature même, qui le rendent difficile à utiliser.