Casse-tête : tableau scrollable en position absolue

Bonjour,
je me débats depuis quelques temps avec le CSS pour obtenir une mise en page un peu particulière.

Il s'agit de placer un tableau (avec en-tête et pied) en position absolue de manière à ce qu'il s'étire avec la fenêtre. Ce qui complique les choses c'est que le tbody de ce tableau doit être scrollable verticalement et que le tableau entier doit être scrollable horizontalement (il y a une largeur minimale).

Jusque là je me suis débrouillé en utilisant 3 tableaux à la place d'un seul et des divs pour gérer le scroll mais c'est un peu bancal. Il doit surement être possible de faire ça plus proprement, d'autant plus que ça n'a besoin de fonctionner que sur les dernières versions de Firefox, Safari et Chrome (et IE si il veut bien).

Pour illustrer, voici mon bricolage.

Voilà, merci d'avoir porté attention à mon problème
Modifié par Whisno (28 Jul 2012 - 12:20)

Donc là tu as mis 3 tables, une pour les entetes, une pour les données et l'autre pour le footer.
Ca a l'air de marcher, le seul détail qui me gêne c'est que ce n'est pas aligné verticalement (Safari 6).

Pour rester propre et arranger tout ça, voilà ce que je ferais à ta place :

<table>
<thead><tr><th>avec tes entêtes</th></tr></thead>
<tfoot><tr><td>avec ton pied de tableau</td></tr></tfoot>
<tbody><tr><td>avec tes données</tr></tr></tbody>
</table>

Donc après en CSS, tu peux cibler directement les balises pour mettre en position:absolute thead et tfoot et toute ta table en overflow:scroll;.
C'est ce qui me parait le plus simple et le plus adapté à ton idée.

[EDIT]
Ca semble ne pas marcher...

W3C a écrit :
Table rows may be grouped into a head, foot, and body sections, (via the THEAD, TFOOT and TBODY elements, respectively). Row groups convey additional structural information and may be rendered by user agents in ways that emphasize this structure. User agents may exploit the head/body/foot division to support scrolling of body sections independently of the head and foot sections. When long tables are printed, the head and foot information may be repeated on each page that contains table data.

C'était bien ça l'idée, sauf que ce n'est apparamment pas supporté par tous les navigateurs voire même aucun... Je teste et je repasse.

[EDIT]

Non, apparemment et sauf contre indication pas de façon plus propre de faire, tout ceux qui se sont cassé la tête là dessus en sont venu à la même solution ou à faire suivre le scroll du head et du footer en javascript.

Tu peux te plaindre par ici :

https://bugzilla.mozilla.org/show_bug.cgi?id=674214
https://code.google.com/p/chromium/issues/detail?id=8998
https://bugs.webkit.org/show_bug.cgi?id=3239

Ca semble marcher dans firefox 3, si c'est pour un intranet, ça peut peut-être se négocier ?
Modifié par prophete en chef (31 Jul 2012 - 21:22)