Aligner deux tableaux (comme s'ils n'étaient qu'un)
Résolu/Fermé
pols12
Messages postés
1143
Date d'inscription
lundi 22 mars 2010
Statut
Membre
Dernière intervention
31 juillet 2019
-
9 juin 2015 à 15:14
Groarh Messages postés 682 Date d'inscription vendredi 1 août 2008 Statut Membre Dernière intervention 28 juin 2015 - 28 juin 2015 à 17:21
Groarh Messages postés 682 Date d'inscription vendredi 1 août 2008 Statut Membre Dernière intervention 28 juin 2015 - 28 juin 2015 à 17:21
A voir également:
- Aligner deux tableaux (comme s'ils n'étaient qu'un)
- Fusionner deux tableaux excel - Guide
- Deux comptes whatsapp - Guide
- Tableaux croisés dynamiques - Guide
- Deux ecran pc - Guide
- Supprimer une conversation messenger pour les deux personnes ✓ - Forum Facebook
2 réponses
Groarh
Messages postés
682
Date d'inscription
vendredi 1 août 2008
Statut
Membre
Dernière intervention
28 juin 2015
185
11 juin 2015 à 00:58
11 juin 2015 à 00:58
Ce n'est ni bien ni mal de mettre des <div> 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 <td>, puis écraser cette directive avec une nouvelle valeur pour la première colonne uniquement, avec la pseudo-classe :first-child.
Les pourcentages des <td> 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.
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 <td>, 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 <td> 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
Messages postés
1143
Date d'inscription
lundi 22 mars 2010
Statut
Membre
Dernière intervention
31 juillet 2019
119
19 juin 2015 à 00:18
19 juin 2015 à 00:18
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
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 ?
Groarh
Messages postés
682
Date d'inscription
vendredi 1 août 2008
Statut
Membre
Dernière intervention
28 juin 2015
185
27 juin 2015 à 05:33
27 juin 2015 à 05:33
À l'heure actuelle il n'existe pas de moyen universel pour connaître (ou définir soi-même) les dimensions de la barre de défilement. Webkit (le moteur de rendu de Safari) permet de les styler, avec des propriétés préfixées : https://css-tricks.com/custom-scrollbars-in-webkit/
Je ne sais pas quels autres navigateurs permettent aussi ça. Il me semble que ce n'est pas encore assez répandu.
Comme solution alternative, tu peux t'en remettre à un petit bout de JavaScript pour calculer la largeur (offsetWidth - clientWidth - border, voir les détails : https://developer.mozilla.org/en-US/docs/Web/API/CSS_Object_Model/Determining_the_dimensions_of_elements Garde ton padding-right de 14px, il servira de « fallback ». Si JavaScript est activé, il calculera la vraie largeur de la barre et écrasera la déclaration CSS.
Je ne sais pas quels autres navigateurs permettent aussi ça. Il me semble que ce n'est pas encore assez répandu.
Comme solution alternative, tu peux t'en remettre à un petit bout de JavaScript pour calculer la largeur (offsetWidth - clientWidth - border, voir les détails : https://developer.mozilla.org/en-US/docs/Web/API/CSS_Object_Model/Determining_the_dimensions_of_elements Garde ton padding-right de 14px, il servira de « fallback ». Si JavaScript est activé, il calculera la vraie largeur de la barre et écrasera la déclaration CSS.
animostab
Messages postés
2829
Date d'inscription
jeudi 10 mars 2005
Statut
Membre
Dernière intervention
11 novembre 2019
738
Modifié par animostab le 27/06/2015 à 16:18
Modifié par animostab le 27/06/2015 à 16:18
Bonjour
d'après ce que je vois il ne faut pas utiliser la balise table !
table = afficher des données tabulaires
en quoi une barre de défilement ou un formulaire ont a voir avec l'affichage de données tabulaires du genre:
| ville | population | superficie | code postal |
mettre en forme des div en css (et en responsive) est plus aisé que mettre en forme des tableaux ne servant pas aux données tabulaires
d'après ce que je vois il ne faut pas utiliser la balise table !
table = afficher des données tabulaires
en quoi une barre de défilement ou un formulaire ont a voir avec l'affichage de données tabulaires du genre:
| ville | population | superficie | code postal |
mettre en forme des div en css (et en responsive) est plus aisé que mettre en forme des tableaux ne servant pas aux données tabulaires
pols12
Messages postés
1143
Date d'inscription
lundi 22 mars 2010
Statut
Membre
Dernière intervention
31 juillet 2019
119
>
animostab
Messages postés
2829
Date d'inscription
jeudi 10 mars 2005
Statut
Membre
Dernière intervention
11 novembre 2019
27 juin 2015 à 22:15
27 juin 2015 à 22:15
Si animostab, mon code est utilisé pour l'affichage d'une BDD, donc il s'agit bien de données tabulaires.
Merci beaucoup Groarh !
Par contre, j'avais oublié de te préciser, les DIV dans des TABLE, c'est l'affichage de la source de Firefox qui m'a dit que c'était mal.
Merci beaucoup Groarh !
Par contre, j'avais oublié de te préciser, les DIV dans des TABLE, c'est l'affichage de la source de Firefox qui m'a dit que c'était mal.
Groarh
Messages postés
682
Date d'inscription
vendredi 1 août 2008
Statut
Membre
Dernière intervention
28 juin 2015
185
28 juin 2015 à 17:21
28 juin 2015 à 17:21
Ils sont en rouge c'est ça ?
Le « code source de Firefox » affiche du rouge quand quelque chose ne respecte pas strictement la structure décrite par le doctype. Mais Firefox (et les autres navigateurs) sont capables de « réparer » les erreurs HTML pas trop graves.
Si tu veux savoir ce qui ne va pas dans ton code, tu peux utiliser le validateur : http://validator.w3.org/
Sache que respecter ou non le standard est une question complexe, qui dépend des besoins et des opinions de chacun. Par exemple, je sais qu'il y a quelques temps, il était difficile de rester standard en concevant une application accessible avec des attributs aria. Je ne sais pas si c'est toujours le cas, mais ça montre qu'il y a des situations où des besoins légitimes ne sont pas couverts par le standard, et on doit alors s'écarter du chemin.
Dans ton cas je pense qu'il n'y a pas besoin de trop réfléchir, tu as peut-être simplement oublié de mettre des <td> ou alors un <tbody>. Ou encore, il manque les éléments « d'introduction » de la page, c'est-à-dire les balises <!DOCTYPE ...>, <html> et <body>.
Le « code source de Firefox » affiche du rouge quand quelque chose ne respecte pas strictement la structure décrite par le doctype. Mais Firefox (et les autres navigateurs) sont capables de « réparer » les erreurs HTML pas trop graves.
Si tu veux savoir ce qui ne va pas dans ton code, tu peux utiliser le validateur : http://validator.w3.org/
Sache que respecter ou non le standard est une question complexe, qui dépend des besoins et des opinions de chacun. Par exemple, je sais qu'il y a quelques temps, il était difficile de rester standard en concevant une application accessible avec des attributs aria. Je ne sais pas si c'est toujours le cas, mais ça montre qu'il y a des situations où des besoins légitimes ne sont pas couverts par le standard, et on doit alors s'écarter du chemin.
Dans ton cas je pense qu'il n'y a pas besoin de trop réfléchir, tu as peut-être simplement oublié de mettre des <td> ou alors un <tbody>. Ou encore, il manque les éléments « d'introduction » de la page, c'est-à-dire les balises <!DOCTYPE ...>, <html> et <body>.
