Aligner deux tableaux (comme s'ils n'étaient qu'un) Résolu/Fermé

Question

Bonjour ! Comme apparemment c'est mal de mettre des DIV dans un tableau, je souhaite faire deux tableaux, mais qu'on croit que ça n'en est qu'un visuellement. Du coup, il faudrait que les colonnes des deux tableaux aient la même taille. Mais spécifier une taille en px, c'est mal (aussi), donc il faudrait une taille relative. Le but final, c'est de permettre une barre de défilement dans le tableau du dessus s'il est trop grand, mais laisser fixe le tableau du dessus. Ça fait quelques années que je n'avais pas touché à du CSS et je m'en portais pas plus mal... :P J'arrive à rien, je fais tout au pif :( Pour ceux qui ont besoin de code pour mieux visualiser :

cell1	cell2
cell3	cell4
cell5	cell6

Merci à vous !

Groarh · Answer

Ce n'est ni bien ni mal de mettre des

dans un tableau, a priori. Il est vrai que c'est une mauvaise pratique d'utiliser un tableau seulement pour la mise en page ; mais je ne crois pas que c'est ce que tu fais ici. À mon avis, la seule chose à vraiment éviter, c'est d'imbriquer un tableau dans un tableau. On l'ignore souvent mais le rendu graphique d'un tableau est parmi les choses les plus difficiles à calculer pour un navigateur... En imbriquant ces specimens, on multiplie la complexité du calcul ! Voici ma suggestion de solution. D'abord, donne la même largeur à tes divs #tableau et #formulaire. D'après ton code elles ont le même parent, donc en donnant une largeur relative en %, si elles n'ont pas de marge/padding (ou alors exactement les mêmes), ça devrait coller. Après ça tu donnes une largeur de 100% à tes deux tableaux et ils colleront à la largeur des deux divs. Ensuite, utilise table-layout: fixed pour que le contenu des cellules n'influence pas la largeur des colonnes. Et, comme tu n'as que deux colonnes, tu peux donner une largeur à toutes les cellules , puis écraser cette directive avec une nouvelle valeur pour la première colonne uniquement, avec la pseudo-classe :first-child. #tableau, #formulaire { width: 100%;}table { table-layout: fixed; width: 100%;}td { width: 62%;}td:first-child { width: 38%;} Les pourcentages des sont dans le cas où les cellules n'ont ni bordures ni padding. En pratique des cellules sans padding c'est moche (à moins que les éléments contenus gèrent l'espacement eux-mêmes avec leurs marges). Donc si tu ajoutes des bordures ou du padding à tes cellules, pense à diminuer un peu leur width.

pols12 · Answer

NICKEL !
Merci beaucoup.

(en réalité j'ai 5 colonnes, pas deux, mais je peux attribuer des classes à chaque, c'est pas très grave)

Reste un souci : La barre de défilement vertical est présente sur le tableau du dessus mais pas sur celui du dessous. Du coup, j'ai un décalage que je peux artificiellement corriger avec un padding-right:14px; Cependant, j'imagine que c'est pas très propre et que du jour au lendemain et selon chaque navigateur la barre de scroll peut changer de taille... Une solution ?

Aligner deux tableaux (comme s'ils n'étaient qu'un)

2 réponses

Discussions similaires