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)

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,

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

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,

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)

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() https://www.alsacreations.com/article/lire/1500-matchmedia-javascript-media-queries.html et Ajax https://developer.mozilla.org/fr/docs/Web/Guide/AJAX .

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 .

Bonjour,

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

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.

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)