[Résolu] Tableau scrollable x et y

Bonjour,

Je teste plusieurs comportements de l'élément <table> et un me pose soucis.

Objectif : faire un tableau avec un <header> fixe et un <tbody> ayant une hauteur fixe et un scroll-y.
(ce point là est fait).
Contrainte : le tableau est hyper large et dépasse de la fenêtre du navigateur (donc visible avec le scroll horizontal du navigateur).

Le problème : lorsque le tableau dépasse de la fenêtre du navigateur, les largeurs spécifiées ne sont plus prises en compte et les <th> ne sont plus en alignés verticalement avec les <td>.

Voici le cas : http://codepen.io/Carine/pen/xqKDa

Qu'en pensez-vous ? Avez vous déjà rencontré ce cas ?

Par avance merci,
Modifié par Goupilette (13 Nov 2013 - 10:40)

salut,
c'est parce que tu as modifié le display du tableau et des <tr>. Tu dois enlever les "display:block" à ces deux là. Par défaut, un tableau est en "display:table" et les <tr> sont en "display:table-row".

Bonjour et bienvenue,

Goupilette a écrit :
Objectif : faire un tableau avec un &lt;header&gt;

Un header qui est un élément thead plutôt (ce que tu as dans ton exemple de code d'ailleurs, mais je précise parce que l'élément header existe également en HTML5 ).

Goupilette a écrit :
Le problème : lorsque le tableau dépasse de la fenêtre du navigateur, les largeurs spécifiées ne sont plus prises en compte et les &lt;th&gt; ne sont plus en alignés verticalement avec les &lt;td&gt;.

Connais-tu l'autre algorithme de rendu des tableaux, à base de table-layout: fixed ? Le navigateur n'adapte plus le tableau au contenu en tenant compte si possible de ce que veut l'auteur mais fait l'inverse : il respecte les largeurs indiquées sans plus tenir compte du contenu (en cas d'incohérence entre total des largeurs de colonne et largeur totale du tableau, Safari 6+ ne prendra pas la même décision que les autres navigateurs, à tester ou mieux être cohérent entre les 2 types de largeur).

Sinon les headers de tableau fixe sont un problème qui se complexifie avec les mobiles et iOS en particulier, avec sûrement des nouveautés et régressions d'une version d'iOS à l'autre. Si des CSS plutôt basiques ne suffisent pas, essaie de regarder sur Stack Overflow pour une question récente où la réponse fait mention d'IOS 7 (ou vérifie sur iOS 7 en tout cas).
Modifié par Felipe (13 Nov 2013 - 11:53)

Zelalsan a écrit :
salut,
c'est parce que tu as modifié le display du tableau et des &lt;tr&gt;. Tu dois enlever les &quot;display:block&quot; à ces deux là. Par défaut, un tableau est en &quot;display:table&quot; et les &lt;tr&gt; sont en &quot;display:table-row&quot;.

Bonjour Zelalsan, et merci de ton intérêt. Oui, j'ai mis ces propriétés pour avoir le <thead> fixe. C'est le seul moyen, sans toucher à la sémantique, que je connaisse.

Felipe,

Oui ... je pensais <thead> mais c'est <header> que j'ai écrit ... la malheureuse !

Oui je connais le rendu fixed (article de Raphael) mais il ne marche pas quand je modifie le display pour avoir le rendu du <thead> fixe.
En fait, je n'arrive pas à faire marcher le <thead> fixe avec la contrainte du tableau qui dépasse de la fenêtre du navigateur.
Modifié par Goupilette (13 Nov 2013 - 12:12)

Quelqu'un a t'il déjà eu le cas et réussi à faire fonctionner les 2 cas ?

http://codepen.io/Carine/pen/xqKDa

Voici la solution :

=> ajouter un min-width et max-width aux éléments <td> et <th>.
J'ai modifié le code dans l'exemple suivant : http://codepen.io/Carine/pen/xqKDa