1485 sujets

Web Mobile et responsive web design

Transformer une table en liste avec indentations

Bonjour,

Cette discussion fait suite à ces deux discussions :

[Résolu] Fusionner plusieurs cellules frères

[Résolu] Déplacer cellule d'un table sur petit écran

Cette fois il s'agit d'un tableau arborescent.

Un exemple raccourci :

<table id="aid" class="roll lst">
<thead><tr><th>Cat&eacute;gorie</th><th>Conducteur</th><th>Blindage</th><th>LSZH</th><th class="lst">Offre <span>(prix au m&egrave;tre et TTC)</span></th></tr></thead>
<tbody>
<tr><td rowspan="6" class="cat rgt" id="A"><a href="#">Cat5e</a></td><td rowspan="3" class="rdo bdo" id="A1"><a href="#">Monobrin</a></td><td id="A11" class="rpp bpp"><a href="#">UTP</a></td><td class="rpp bpp tdf"></td><td id="A111" class="lst bpp"><a href="#">3 produits, 4 versions de 0,37 &agrave; 0,53&nbsp;&euro;</a></td></tr>
<tr><td id="A12" class="rpp bpp"><a href="#">F / UTP</a></td><td id="A121" class="rpp  cen bpp"><a href="#">(oui)</a></td><td id="A1211" class="lst bpp"><a href="#">3 produits, 6 versions de 0,55 &agrave; 1,21&nbsp;&euro;</a></td></tr>
<tr><td id="A13" class="rpp bdo"><a href="#">SF / UTP</a></td><td id="A131" class="rpp  cen bdo"><a href="#">(oui)</a></td><td id="A1311" class="lst bdo"><a href="#">2 produits, 3 versions de 0,85 &agrave; 0,91&nbsp;&euro;</a></td></tr>
<tr><td rowspan="3" class="rdo cat" id ="A2"><a href="#">Multibrin</a></td><td id="A21" class="rpp bpp"><a href="#">UTP</a></td><td class="rpp bpp tdf"></td><td id="A211" class="lst bpp"><a href="#">2 versions &agrave; 0,53&nbsp;&euro;</a></td></tr>
<tr><td id="A22" class="rpp bpp"><a href="#">F / UTP</a></td><td class="rpp bpp tdf"></td><td id="A221" class="lst bpp"><a href="#">2 versions de 0,26 &agrave; 0,52&nbsp;&euro;</a><em>-50&nbsp;%</em></td></tr>
<tr><td id="A23" class="rpp cat"><a href="#">SF / UTP</a></td><td class="rpp cat tdf"></td><td id="A231" class="lst cat"><a href="#">2 versions de 0,71 &agrave; 0,85&nbsp;&euro;</a></td></tr>
<tr><td rowspan="7" class="cat rgt" id="B"><a href="#">Cat6</a></td><td rowspan="4" class="rdo bdo" id="B1"><a href="#">Monobrin</a></td><td id="B11" class="rpp bpp"><a href="#">UTP</a></td><td id="B111" class="rpp  cen bpp"><a href="#">(oui)</a></td><td id="B1111" class="lst bpp"><a href="#">4 produits, 5 versions de 0,50 &agrave; 0,67&nbsp;&euro;</a></td></tr>
<tr><td id="B12" class="rpp bpp"><a href="#">F / UTP</a></td><td id="B121" class="rpp  cen bpp"><a href="#">(oui)</a></td><td id="B1211" class="lst bpp"><a href="#">6 produits, 19 versions de 0,58 &agrave; 2,82&nbsp;&euro;</a></td></tr>
<tr><td id="B13" class="rpp bpp"><a href="#">U / FTP</a></td><td id="B131" class="rpp  cen bpp"><a href="#">(oui)</a></td><td id="B1311" class="lst bpp"><a href="#">2 produits, 8 versions de 0,60 &agrave; 2,40&nbsp;&euro;</a></td></tr>
<tr><td id="B14" class="rpp bdo"><a href="#">S / FTP</a></td><td id="B141" class="rpp  cen bdo"><a href="#">(oui)</a></td><td id="B1411" class="lst bdo"><a href="#">3 produits, 4 versions de 0,78 &agrave; 0,98&nbsp;&euro;</a></td></tr>
<tr><td rowspan="3" class="rdo cat" id ="B2"><a href="#">Multibrin</a></td><td id="B21" class="rpp bpp"><a href="#">UTP</a></td><td class="rpp bpp tdf"></td><td id="B211" class="lst bpp"><a href="#">0,60&nbsp;&euro;</a></td></tr>
<tr><td id="B22" class="rpp bpp"><a href="#">F / UTP</a></td><td class="rpp bpp tdf"></td><td id="B221" class="lst bpp"><a href="#">15 versions de 0,38 &agrave; 0,55&nbsp;&euro;</a></td></tr>
<tr><td id="B23" class="rpp cat"><a href="#">S / FTP</a></td><td class="rpp cat tdf"></td><td id="B231" class="lst cat"><a href="#">2 produits, 13 versions de 0,66 &agrave; 0,80&nbsp;&euro;</a></td></tr>
</tbody>
</table>


Voir le codepen.

Sur petit écran, l'idée est de remplacer ce tableau par une liste indentée.

En l’occurrence il y a 5 colonnes mais seulement 3 niveaux d'arborescence car les 3 dernières colonnes sont au même niveau.
L'objectif est d'arriver à ce résultat (avec une légère indentation) :

Catégorie 1
Conducteur 1
Blindage 1 : 3 produits, 4 versions de 0,37 à 0,53 €
Blindage 2 : (oui) 3 produits, 6 versions de 0,55 à 1,21 €
Conducteur 2
Blindage 1 : 3 produits, 4 versions de 0,37 à 0,53 €
Blindage 2 : (oui) 3 produits, 6 versions de 0,55 à 1,21 €
Blindage 3 : (oui) 3 produits, 6 versions de 0,55 à 1,21 €
Catégorie 2
Conducteur 1
Blindage 1 : 3 produits, 4 versions de 0,37 à 0,53 €
Blindage 2 : (oui) 3 produits, 6 versions de 0,55 à 1,21 €
Conducteur 2
Blindage 1 : 3 produits, 4 versions de 0,37 à 0,53 €
Blindage 2 : (oui) 3 produits, 6 versions de 0,55 à 1,21 €
Blindage 3 : (oui) 3 produits, 6 versions de 0,55 à 1,21 €
etc...

J'y réfléchis...
Merci de votre aide.
Modifié par boteha_2 (22 Dec 2019 - 16:41)
Voila une piste, qu'il faudra peaufiner. Cela consiste à transformer les cellules <td> en list-item et de gérer la marge gauche en fonction de leur niveau.

#aid td {display:list-item; margin-left:10px;}
#aid .cat {margin-left:20px;}
#aid .rdo {margin-left:30px;}
#aid .rpp {margin-left:40px;}
#aid .lst {margin-left:50px;}
Alainpre a écrit :
Voila une piste, qu'il faudra peaufiner. Cela consiste à transformer les cellules <td> en list-item et de gérer la marge gauche en fonction de leur niveau.]


Cela me semble une très bonne approche car il s'agit de transformer un tableau en listes imbriquées.
Avec toutefois la difficulté des trois dernières colonnes au même niveau, peut-être simplement display : inline.

Je fais les tests au plus vite, sans doute ce week-end et vous tiens informés.
Modifié par boteha_2 (24 Dec 2019 - 15:51)
Bonjour,

J'ai trouvé une solution qui consiste à passer en display block les colonnes de niveau 1 et 2.

Et à jouer sur les margin-left.

Cela fonctionne, voir le codepen

J'utilise les sélecteurs par id.
Et un sélecteur de class pour les cellules vides qui ne doivent pas avoir de marge.
Je me demande si des sélecteurs plus modernes sont possibles.

Par ailleurs j'ai mis toutes les cellules en white-space: nowrap.
Mais ce serait sympa si les cellules avec les prix continuaient à se comporter comme les cellules d'un tableau, avec un retour à la ligne aligné avec le début du texte. J'espère que c'est clair.

Si vous avez des idées sur ces deux sujets merci d'avance.
Bonjour,

J'ai essayé une nouvelle approche avec display Grid pour les deux dernières cellules de chaque ligne.

Voir ce codepen.

le but est double :
1) inverser les cellules.
je veux que le texte "(oui)" quand il existe soit passé en fin de ligne, autrement dit placée derrière son frère immédiat.
2) Avoir pour la cellule de texte "3 produits, 4 versions de 0,37 à 0,53 €" un comportement de type cellule s'il n'y a pas assez de place.

Dans les deux cas je n'y arrive pas.
Modérateur
Bonjour,

sans toucher au display, text-indent et padding seraient-ils une option acceptable ?

exemple en comptant les cellules via :last-nth-child(n) .

Ce n'est pas très joli, on ne sait pas quoi faire de thead ni des bordures et des fonds.

idée en ligne : https://codepen.io/gc-nomade/pen/abzjjoo
Modérateur
Bonjour,

encore une autre idée: regrouper seulement les deux premières colonnes:

https://codepen.io/kustol/pen/LYEBBaL


th:first-child, th:nth-child(2) {
  display: none;
}
tr {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}
td, th {
  text-align: left;
  display: block;
  width: 20%;
  padding: 4px 0;
  border-bottom: 1px solid #ccc;
}
td.lst, th:last-child {
  width: 60%;
}
td.rgt, td.rdo {
  background: #f0f0f0;
  width: 46%;
  padding: 4px 4% 4px 0;
}
td.rdo:first-child {
  padding-left: 51%;
}
td.rgt:before {
  content: 'Catégorie: ';
  font-size: 0.75em;
}
td.rdo:before {
  content: 'Conducteur: ';
  font-size: 0.75em;
}
Bonjour,

Merci de votre participation, je sens que cela va aider.

je regarde tout cela en soirée, ce week-end au plus tard.
Bonjour,

Vos deux approches sont très intéressantes.

Celle de gcyrillus correspond plus à l'effet recherché et je pense que le résultat est plus clair.

Je me méfie un peu de l'emploi de position : absolute mais cela semble très bien fonctionner.

Je pense que je vais travailler sur ce modèle.

J'ai différents types de tableaux arborescents mais j'ai la possibilité de créer dans le HEAD des déclarations css dynamiques par le script PHP, donc de pouvoir m'adapter à tous les cas.

Je vous tiens informés.
Bonjour,

J'ai travaillé sur la piste de gcyrillus mais j'ai rencontré deux difficultés.

1) La complexité des sélecteurs.
Dans la vraie vie il n'y a pas toujours les rowspan que gcyrillus a trouvé dans le tableau de test.
Pour simplifier il suffit de faire appel a des classes existantes ou que j'ai créées de façon à pouvoir sélectionner les colonnes sans se prendre la tête.

Ce codepen montre le nouveau tableau et les classes de sélection.

2) Le deuxième problème est que la largeur des cellules est en fait assez variable, y compris en colonnes un et deux
J'ai mis en bas du nouveau tableau des contenus plus longs qui montrent le problème.
Du coup il est assez difficile de fixer une bonne valeur pour le text-indent négatif.
La largeur des cellules est définie par le contenu.
On peut imaginer un calcul par le script PHP : strlen de la cellule la plus longue qui permet de fixer à peu près une valeur pour le texr-indent.
Je suppose qu'il doit exister une fonction PHP pour calculer la longueur en em d'une string.
Comme mon PHP peut générer des bouts de css dynamiques c'est une solution possible.

Ou peut-être une autre solution css ?
Je pense à float mais on perd l'effet tableau.
Ou à grid.

J'en suis là, j'y reviens sous peu.

PS :
Les id sont utiles pour un Javascript qui allume les ascendants.
Les classes rpp, bpp, tdf, etc. gèrent les bordures. Elles sont antérieures à la bonne prise en compte des sélecteurs type nth-child.
Modifié par boteha_2 (19 Jan 2020 - 22:54)
Bonjour,

Je préfère une solution en responsive CSS.

Ton approche avec text-indent et padding semble bonne, je vais continuer à y travailler.

Ou Grid peut-être.
Modérateur
Il y a aussi le table-layout pour fixer une largeur dans un tableau: https://codepen.io/gc-nomade/pen/GRgwwMo (pas certains que cela passent dans tous les navigateurs de la même façon) et ce n'est toujours pas trés joli.

Je ne suis toujours pas fan ni convaincu pour l'idée de restyler un tableau en liste Smiley cligne .
Bonjour,

gcyrillus a écrit :
Je ne suis toujours pas fan ni convaincu pour l'idée de restyler un tableau en liste Smiley cligne .


Comment veux-tu faire autrement pour rendre un tableau arborescent complétement visible sur petit écran sans barre de défilement horizontal ?

Personnellement je n'ai pas trouvé mieux et cela me semble assez ergonomique.
Modérateur
boteha_2 a écrit :
Bonjour,
Comment veux-tu faire autrement pour rendre un tableau arborescent complétement visible sur petit écran sans barre de défilement horizontal ?


C'est pouquoi j'evoquais :
gcyrillus a écrit :
En final , Il serait peut-etre plus simple et solide de gérer ça en amont coté serveur,et servir soit une liste, soit un tableau . Le choix du template pourrait-être fait en ajax a l'aide de Window.matchMedia() ... Ajax ...
Si ton contenu est extrait d'une de donnée et passé en boucle à la moulinette dans un template(gabarit) cela me parait plus sure.

Si ton document est statique, alors oui, c'est compliqué, mais l'approche de Kustolovic , consistant a reformater partiellement le tableau parait plus heureux, une variante : https://codepen.io/gc-nomade/pen/ZEYVaKv

Bon courage
Modifié par gcyrillus (21 Jan 2020 - 22:44)
Bonjour,

Le document n'est pas du tout statique mais je n'ai pas trop envie de me lancer dans AJAX alors qu'une solution CSS semble possible.

J'aime bien ta variante.
Il me semble même possible de gagner de la place en supprimant la colonne des blindages et en faisant à la volée une feuille de style pour donner les titres exacts à la place de blindage 1, blindage 2, etc.
Remplacer
td:nth-last-child(1):before
{
 content: "Blindage " counter(bld) " : ";
}


Par une série de déclarations précises :
td#A111:before
{
 content: "UTP " : ";
}
td#A211:before
{
 content: "F / UTP " : ";
}
etc.


Je vais y réfléchir.
Modifié par boteha_2 (23 Jan 2020 - 21:34)
Bonjour,

Je reviens sur ce sujet difficile avec une approche un peu différente.

Colonne 1 passe en ligne, comme dernier essai de Cyrillus.
Colonne 4 est supprimée.

Je m'inspire de l'essai de gcyrillus pour poursuivre.
Modifié par boteha_2 (03 May 2020 - 17:30)
Bonjour,

Ce codepen montre le tableau d'origine et en dessous le résultat attendu mais obtenu par un changement de la structure html.

Il s'agit "simplement" de transformer les td de catégorie (class="cat rgt") en tr.

Trouver un code css pour que 
<td rowspan="6" class="cat rgt" id="A"><a href="#">Cat5e</a></td>

devienne
<tr><td colspan="4" class="cat rgt" id="A"><a href="#">Cat5e</a></td></tr>


Votre approche en flexbox est puissante mais on perd les alignements du tableau.

A la limite j'envoie les deux codes dans le html mais c'est horrible.
Et un mediaQueries pour le display: none ou inline ou block de class="grand_ecran" et class="petit_ecran" 

<tr><td colspan="4" class="cat rgt petit_ecran" id="A"><a href="#">Cat5e</a></td></tr>
<tr><td rowspan="6" class="cat rgt grand_ecran" id="A"><a href="#">Cat5e</a></td><td> etc...
Bonjour,

J'ai un peu avancé, voir ce codepen.

Dommage que l'on ne puisse pas le faire en pure css.

Le résultat est perfectible mais je pense que la voie est bonne.

J'ai un problème avec le javascript qui allume les cellules de l'arborescence.

id="a" en petit écran
id="A" en grand écran.

et je n'arrive pas à faire comprendre au javascript que a=A
Modifié par boteha_2 (17 May 2020 - 19:42)
Sujet clos
Aller à