28182 sujets

CSS et mise en forme, CSS3

Responsive : passer table 7 colonnes en 3 colonnes

Bonjour,

Il y a eu pas de mal de discussions sur les tableaux responsive mais je n'ai pas trouvé de solution à mon problème.

Voir le codepen.

Passer sur 2 colonnes est facile, c'est fait.

Mais sur 3 colonnes avec :

1 :
input
2 :
caractéristiques
couleur
3 :
prix HT, prix TTC
délai
référence

Avez-vous des pistes ?

Merci d'avance.
Administrateur
Hello,

Via Grid Layout, tu peux remodeler exactement comme tu veux ton tableau, voici un exemple : https://codepen.io/raphaelgoetter/pen/VGNXgm

Par contre attention à l'accessibilité : "display" modifie le comportement également pour les assistances techniques.
Pour cela, il vaut mieux s'assurer que les roles ARIA soient bien appliqués (table, rowgroup, row, cell, etc.) : https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/rowheader_role
Grâce à l'exemple pédagogique de Raphaël j'espère avancer sur de bonnes bases.

Voir le codepen.

deux points durs :

Colonne 2, j'ai voulu fusionner le titre et la couleur dans un même grid item rowspan 3 et centrer le contenu en hauteur.
Possible ?

Filet vertical à droite colonnes 1 et 2, sur la hauteur.
Possible ?
Modérateur
boteha_2 a écrit :
Grâce à l'exemple pédagogique de Raphaël j'espère avancer sur de bonnes bases.

Voir le codepen.

deux points durs :

Colonne 2, j'ai voulu fusionner le titre et la couleur dans un même grid item rowspan 3 et centrer le contenu en hauteur.
Possible ?

Filet vertical à droite colonnes 1 et 2, sur la hauteur.
Possible ?


comme ceci ? https://codepen.io/gc-nomade/pen/NPKdveQ
Bonjour gcyrillus,

Merci de ton suivi.

Oui, parfait, tu as réglé le problème des filets et du double centrage de l'input

Voir le codepen

Reste le problème de la colonne 2;

J'ai 3 lignes pour 2 éléments.
Est-il possible de centrer verticalement les 2 éléments dans les 3 lignes ?

Si ce n'est pas clair demande moi d'énoncer autrement.
C'est bien l'effet voulu selon l'énoncé, parfait, merci.

Maintenant il faut que je réfléchisse, parfois le titre fera deux lignes ou plus.

Je vais peut-être revenir avec un énoncé un peu différent.
Modérateur
boteha_2 a écrit :
... parfois le titre fera deux lignes ou plus.

il peut s'étaler sur plusieurs lignes et étirer en hauteur toute la ligne.

Les defauts :
* La 3eme cellule ne peut pas faire plus de 5 lignes sans déborder, apparemment il ne s'agit que d'une couleur, le risque est minime.(3lignes au max c'est bien)
* en réduisant beaucoup la largeur, les largeur de colonnes différent d'une ligne à l'autre. (ton exemple perd l'alignement en dessous d'environ 390px) idem, c'est un risque minime , c'est plutôt la lecture des case qui devient plus difficile

enfin, vérifier le comportement avec les navigateur Apple peut-être Smiley smile
Bonjour gcyrillus,

gcyrillus a écrit :
* La 3eme cellule ne peut pas faire plus de 5 lignes sans déborder, apparemment il ne s'agit que d'une couleur, le risque est minime.(3lignes au max c'est bien)


C'est une couleur, au plus deux mots, violet foncé, donc pas de souci.

Par contre le titre peut prendre plusieurs lignes, comme j'ai fait dans mon codepen après avoir copier-coller ton code CSS.

gcyrillus a écrit :

* en réduisant beaucoup la largeur, les largeur de colonnes différent d'une ligne à l'autre. (ton exemple perd l'alignement en dessous d'environ 390px) i


si c'est bon à partir de 400px cela va bien.

Je reviens bientôt avec quelques contraintes en plus
Bonjour,

Dans le codepen j'explore une nouvelle piste plus modeste.

Premier <tr>, je demande au titre d'occuper 2 lignes.

Je ne comprends pas pourquoi le délai en colonne 3 est sous la ligne 2.

Autrement, le padding est modifié pour chaque élément de façon à ne gérer que les marges internes de la cellule.

J'ai centré horizontalement avec td { text-align: center; }
Bonjour,

boteha_2 a écrit :
Premier <tr>, je demande au titre d'occuper 2 lignes.
Je ne comprends pas pourquoi le délai en colonne 3 est sous la ligne 2.


C'était dû à erreur de padding dans td:nth-child(6).

Corrigé dans le codepen, cela avance.
Bonjour,

j'ai un peu travaillé le codepen.

Pour les deux derniers produits il y a une remise.

Elle apparaît dans un tr class="puce" sous le tr du produit, couleur vert.

Je me demande si avec ORDER il est possible de faire afficher tr class="puce" avant le tr dont il est frère.
Modifié par boteha_2 (21 Dec 2024 - 14:22)
Modérateur
boteha_2 a écrit :
Bonjour,

Je me demande si avec ORDER il est possible de faire afficher tr class="puce" avant le tr dont il est frère.

Bonjour,

Oui et non, cela implique de donner un numéro a order à chaque tr ,puis d'en inverser 2 . CSS ne sait pas faire.

Le plus simple et raisonnable serait d'avoir cette remise au plus proche des prix indiqués, c'est à dire dans leur cellules respectives.
tip: regarde ta page sans styles et voit si les remises ont toujours un sens lorsque dans une ligne différente, loin de leur contexte.
Bonjour gcyrillus,

Merci de ton suivi.

gcyrillus a écrit :
Oui et non, cela implique de donner un numéro a order à chaque tr ,puis d'en inverser 2 . CSS ne sait pas faire.


La page étant créée par PHP je pourrais générer des déclarations CSS dynamiques mais dans ce cas c'est l'usine-à-gaz car il peut y avoir beaucoup de remises dans le même tableau.

Ce que je retiens c'est qu'il n'existe pas de solution sans numérotation, du genre :
tr + tr.puce {ORDER : remonte d'un cran}

gcyrillus a écrit :
Le plus simple et raisonnable serait d'avoir cette remise au plus proche des prix indiqués, c'est à dire dans leur cellules respectives.


Il faut changer la mise en page du tableau de base.
J'y pense, la difficulté étant que la remise doit être bien visible.
Modifié par boteha_2 (21 Dec 2024 - 15:22)
Modérateur
boteha_2 a écrit :
Bonjour gcyrillus,
Merci de ton suivi.
La page étant créée par PHP

et bien justement, c'est plus facile, il suffit d'ajouter ces informations dans les cellules .

la deuxième et les class="tdl" , comme cela, pas besoin de revoir la disposition des cellules. Il suffit juste à injecter ces infos aux bons endroits Smiley cligne
Modifier les prix est très facile, d'accord.

La difficulté est de faire apparaître -5 % (jusqu'au 7 janvier) ou même seulement -5 % sans bousiller le tableau.

C'est une question de mise en page, la personne chargée du graphisme y réfléchit.
Prévenir un modérateur
Répondre au sujet
Aller à