28217 sujets

CSS et mise en forme, CSS3

Je suis face à un problème et j'ai beau écumé le plus de ressources possible, mon problème reste sans réponse satisfaisante. (c.a.d. qui fonctionne sous gecko et IE)

Je voudrais afficher un tableau contenant un grand nombre de lignes et/ou de colonnes, il faudrait donc pour que l'on puisse se repérer figer la première ligne d'entête et la première colonne tout en permettant le défilement vertical et horizontal.

Le code représentant les données devrait ressembler à ceci :

<table>
<thead>
<tr><th>Nom</th><th>Prenom</th><th>Note 1</th><th>Note 2</th></tr>
</thead>
<tbody>
<tr><td 
class="col1">Dupond</td><td>Martin</td><td>A</td><td>B</td></tr>
<tr><td class="col1">Dupond</td><td>Jacques</td><td>A</td><td>B</td></tr>
<tr><td class="col1">Dupont</td><td>Paul</td><td>A</td><td>B</td></tr>
<tr><td class="col1">Dupont</td><td>Pierre</td><td>A</td><td>B</td></tr>
</tbody>
</table>

Au début j'avais pensé à qqchose comme cela en full CSS mais sans résultat et il ne s'agit pour l'instant que de la ligne d'entête:

table {
  width: 100%;
}
thead {
  height: 20%;
  color: #DDD;
}
tbody {
  height: 80%;
  overflow: scroll;
}   


En revanche, j'ai pu trouver quelques scripts utilisant les "behaviour" (htc) mais cela ne fonctionne que sous IE... Plus ou moins bien suivant les versions...
Salut,

J'ai déjà essayé de faire ça. Honnêtement, la seule façon que j'ai trouvée relève del'astuce à 2 balles :
1) il faut que tes colonnes soient toutes de largeur définie
2) Tu mets l'en-tête et le corps du tableau dans 2 tableaux différents, l'un sous l'autre.
3) Tu mets le 2ème dans un div scrollable

Inconvénients : C'est anti-sémantique et ça alourdit (légèrement) le poids de ta page. Smiley bawling

Après vérification, le coup du tbody : scroll marche sur IE6 et Firefox 1.0. Smiley lol
Modifié le 18 Nov 2004 - 09:24