Aligner deux tableaux (comme s'ils n'étaient qu'un)
Résolu
pols12
Messages postés
1143
Date d'inscription
Statut
Membre
Dernière intervention
-
Groarh Messages postés 682 Date d'inscription Statut Membre Dernière intervention -
Groarh Messages postés 682 Date d'inscription Statut Membre Dernière intervention -
A voir également:
- Aligner deux tableaux (comme s'ils n'étaient qu'un)
- Fusionner deux tableaux excel - Guide
- Deux ecran pc - Guide
- Trier un tableau excel - Guide
- Deux whatsapp sur un téléphone - Guide
- Comment faire deux colonnes indépendantes dans word - Guide
2 réponses
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.
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 ?
À 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.
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
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>.