1485 sujets

Web Mobile et responsive web design

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

Pages :
Bonjour,

Le problème que je rencontre me semble intéressant en Responsive.

J'ai un tableau tout simple en 3 colonnes et deux lignes.

<table>
<tr><td>Un>/td><td>Titre un</td><td><Description produit  un</td></tr>
<tr><td>Deux></td><td>Titre deux</td><td><Description produit  deux</td></tr>
<table>


Sur petit écran, je veux que "Description produit deux" s'affiche sous "Titre deux", ne me demandez pas pourquoi c'est juste un exemple pour poser le problème.

Je veux arriver à l'équivalent de cette structure :

<table>
<tr><td>Un>/td><td>Titre un</td><Description produit  un</td></tr>
<tr><td rowspan="2">Deux></td><td colspan="2">Titre deux</td></tr>
<tr><td colspan="2"><Description produit  deux</td></tr>
<table>


Comme display: table présente la grande faiblesse de ne pas agir sur rowspan et colspan je ne vois pas comment m'en sortir avec ce mode de display.

Peut-être un javascript pour modifier rowpan et colspan ?

J'ai pensé à passer par display Grid.
Je n'ai pas trouvé de documentation sur le traitement d'une table en display: grid.
Si table {display: grid} ce sont les tr qui sont grid-item alors que ce sont les td que je veux bouger.

Je précise que je ne veux pas à avoir à déclarer de largeur pour mes cellules, c'est le contenu qui fixe la largeur.

Une solution très peu élégante serait de rentrer les deux structures dans le html et d'afficher celle voulue selon media-query.

<table>
<tr><td>Un>/td><td>Titre un</td><Description produit  un</td></tr>
<tr class="grand"><td>Deux></td><td>Titre deux</td><td><Description produit  deux</td></tr>
<tr class="petit"><td rowspan="2">Deux></td><td colspan="2">Titre deux</td></tr>
<tr class="petit"><td colspan="2"><Description produit  deux</td></tr>
<table>

tr.grand {display: table-row}
tr.petit {display: none}

@media screen and (max-width: 480px)
{
tr.grand {display: none}
tr.petit {display: table-row}
}

Modifié par boteha_2 (14 Jul 2019 - 15:18)
Modérateur
pour cet example, un reset sur dissplay et width pour les 2 derniere cellules pourrait faire l'affaire: https://codepen.io/anon/pen/xoNJWB
<table>
  <tr>
    <td>Un</td>
    <td>Titre un</td>
    <td>Description produit un</td>
  </tr>
  <tr>
    <td>Deux</td>
    <td>Titre deux</td>
    <td>Description produit deux</td>
  </tr>
</table>



table tr:nth-child(2) td ~ td {
  display: block;
  width: 200%;
}

/* deco */
table {
  table-layout: fixed;
  border-collapse: collapse;
  border: solid;
  overflow: hidden;
}
td {
  border: solid;
  padding: 1em;
  box-sizing: border-box;
}
table tr:nth-child(2) td ~ td {
  border: none;
  box-shadow: 0 3px;
}
Bonjour,

Merci pour ton code très intéressant.

Mais ton tableau n'est pas responsive, tu fixes width: 800px.

Comme j'ai dit dans l'énoncé du problème aucune largeur ne doit être spécifiée.

Est-ce que ton code peut fonctionner sans définir les largeurs ?
Je vais y réfléchir.
Bonjour,

Merci de ton suivi.

Je n'ai pas le temps de m'en occuper dans la journée mais je regarde ce soir ou au plus tard le week-end prochain.
Bonjour,

Ton code en Grid semble bien.

Avec display: table je ne vois pas comment y arriver sans spécifier de largeur.

table tr:nth-child(2) td ~ td { display: block}


En toute logique tu fais exploser la deuxième colonne

Voir ce codepen.
Modérateur
boteha_2 a écrit :
Bonjour,
...
En toute logique tu fais exploser la deuxième colonne
...


Bonjour,
oui en effet, car ton tableau reste un tableau, et les deux cellule passées en display:block s'empilent dans la zone de la seconde colonne .La troisième colonne reste vide , il faut déborder dedans , sans largeur au tableau ni table-layout:fixed, c'est du bricolage aléatoire Smiley decu . Autre solution, passer les dernières cellules du premier tr en inline-block https://codepen.io/gc-nomade/pen/aggaPv mais, là encore, bricole.

et aussi oui, ça ressemble plus a un job pour grid si tu veux gérer tes zones via CSS. Pour le tableau HTML , si cela doit en être un, garde le, cependant, il te faudra quand même donner une largeur au moins a ta première colonne dans cet exemple, car chaque tr seront dissociés coté style.
Modifié par gcyrillus (15 Jul 2019 - 23:24)
Bonjour,

Merci encore pour ces suggestions très intéressantes.

Juste une petite question, pourquoi en Grid dis-tu qu'il faut définir une largeur pour la première colonne ?
Bonjour,

Pour un vrai Grid ne devrais-je pas changer pas la structure de façon à n'avoir que des enfants directs ?

En fait je n'ai pas absolument besoin d'un tableau mais j'ai besoin d'alignements sans définir de largeurs et la table est bien pour cela.
Je pourrais remplacer table par un div en display table mais bon...

Je cherche un code conforme et robuste sur un maximum de navigateurs.

Je me demande si une approche n'est pas de partir du tableau sur 3 lignes pour le passer en 2 lignes sur grand écran.

<table>
<tr><td>Un>/td><td>Titre un</td><td><Description produit  un</td></tr>
<tr><td>Deux></td><td>Titre deux</td><td class="vide"></td></tr>
<tr><td class="vide"></td><td><Description produit  deux</td><td class="vide"></td></tr>
<table>

media screen and min-width 800px
{
tr::last-child {display: inline}
td.vide {display: none}
}


Pas le temps de faire un codepen ce soir mais j'éditerais quand ce sera fait.

Ce n'est pas une bonne solution, c'est même idiot.
Voir ce codepen
Modifié par boteha_2 (20 Jul 2019 - 16:51)
Modérateur
si c'est pour partir sur un display:grid, c'est plus simple et solide .Tu pourrais avec par exemple une liste de définition (pour dire y'a un effort sur la semantique et coté pratique des balises différentes pour les selecteurs ) Smiley smile en gros, div, hx, p, ça va peut-etre mieux.

Voilà un exemple a 2 niveaux sur lequel tu peut broder et renommer les balises html comme tu le souhaite en mettant à jour les sélecteurs CSS.

<dl>
  <dt>Un</dt>
  <dd>Titre un</dd>
  <dd>Description produit  un</dd>
  <dt>Deux</dt>
  <dd>Titre deux</dd>
  <dd>Description produit deux</dd>
</dl>


* {margin:0;padding:0;}
dl {
  display:inline-grid;
  grid-template-columns:auto 1fr 1fr;
  border:solid;
  grid-gap:3px;
  padding:3px;
}
dt,dd {border:solid;}
@media screen and (max-width : 800px) {
  dt~dt {
    grid-row:span 2;
  }
  dt~dt~dd {
    grid-column:span 2;
  }
}



Pour le tableau, autant faire le switch sur display:none et table-row en dupliquant les contenus 

<table>
  <tr>
    <td>Un</td>
    <td>Titre un</td>
    <td>Description titre un</td>
  </tr>
  <tr class="big">
    <td>Deux </td>
    <td>Titre deux</td>
    <td>Description titre deux</td>
  </tr>
  <tr class="small">
    <td rowspan="2">Deux </td>
    <td colspan=2>Titre deux</td>
  </tr>
  <tr class="small">
    <td colspan="2">Description titre deux</td>
  </tr>
</table>


table,
td {
  border: solid 1px;
  margin: auto;
}
.small {
  display: none;
}
@media screen and (max-width: 800px) {
  .big {
    display: none;
  }
  .small {
    display: table-row;
  }
}

https://codepen.io/gc-nomade/pen/GbVzOx

Voilà, je crois que l'on à fait le tour sur les options de display a partir d'un tableau face a une structure moins complexe en grid.
Je reste curieux de l'option que tu garderas .
Modifié par gcyrillus (16 Jul 2019 - 23:45)
Bonjour,

Encore merci de tes suggestions toutes très intéressantes.

Je vais y réfléchir et prendre une décision ce week-end.

Pour Grid se pose encore la question du support par les principaux navigateurs un peu anciens.

Cela dit il y a moyen de styler la liste de définitions de façon à avoir un rendu non-horrible sur les navigateurs qui ne comprennent pas display: grid.

Je te tiens informé.
Modérateur
Tu peut éventuellement garder le tableau pour les vieux navigateur et le réorganiser pour les plus récent, ou bien partir sur une structure plus classique en display:table/table-cell et en grid via @support pour les plus récents.

En gros quand je patauge, j'affiche le HTML sans style et si l'affichage à du sens je garde. le plus simple est toujours le plus efficace et facile a maintenir Smiley cligne

bonne continuation.
Modifié par gcyrillus (17 Jul 2019 - 19:08)
Bonjour,

Trois propositions dans ton codepen

J'exclue la solution de facilité qui consiste à entrer les deux contenus dans le code html avec un switch en media-queries, c'est trop éloigné de l'esprit du responsive web.

Je vais essayer de mettre en œuvre la solution : table, mediaquerie , display:grid et display:content

Par rapport à la première solution, l'avantage est concentrer la complexité du css sur les petits écrans alors que le code pour grand écran reste vieux comme le Web.
La plupart des navigateurs pour téléphone sont très modernes et connaissent Grid.

Le changement de structure avec liste de définitions et display: GRID est le plus tentant mais j'ai peur de problèmes de compatibilité avec trop de navigateurs encore utilisés sur PC.

Je me lance dans les modifications de mon code, je te tiens informé.
Bonjour,

J'ai, isolé la partie qui m'intéresse de ton code dans ce codepen.

Je n'aurais pas pensé à associer display: contents à display: grid.

Si j'ai bien compris :

table tbody, table tr {display:contents}


Cela revient à effacer les TR de façon à ce que les TD soient des enfants directs de table.

table {display: inline-grid}


Tu peux maintenant positionner et styler les TD avec les propriétés de GRID.

Sur mon site de test cela fonctionne très bien.

j'attends un peu avant de cocher Résolu.

Un grand merci.
Modifié par boteha_2 (20 Jul 2019 - 21:54)
Bonjour,

Juste un truc qui marche mais que je ne comprends pas :

grid-template-columns: auto auto 1fr;


On peut penser que tu demandes à la troisième colonne d'occuper toute la place restante du container, un peut comme si display: block.

Mais la taille de cette colonne reste déterminée par le contenu, ce qui est d'ailleurs ce que je cherche, voir le codepen.

Le comportement est le même qu'avec :

grid-template-columns: auto auto auto;


Du coup sur mon site de test je prends ce code qui me semble plus clair :

grid-template-columns: auto auto auto;


J'attends encore quelques tests avant de cocher résolu.
Modérateur
oui, pour le cas c'est du pareil au même (et tu ne donne pas de largeur non plus au conteneur), car il n'y a qu'une colonne, mais si tu fait auto 1fr 1fr , tu remarquera , que l'espace laissé par la première colonne est partagé par les 2 autres à largeur égale., 1fr 1fr 1fr donnerait 3 colonnes de largeur égales.

fait quelques test avec des cellules avec peu et beaucoup de mots ainsi qu'en donnant une largeur au conteneur, soit trop grande ou trop petite obligeant le contenu a passé sur plusieurs lignes.

auto, 1fr, ou une largeur fixe, te permettent alors de distribuer tes colonnes comme tu le souhaites quand le contenu est plus court ou plus long que la largeur de ton grid.

Ton exemple se réduit a la largeur de son contenu avec 3 colonnes de largeur grandissantes, d'où ton interrogation.
Bonjour,

En fait le comportement n'est pas le même.

auto auto 1fr est plus fluide que auto auto auto.

Ce qui m'étonne c'est qu'avec auto auto 1fr l'élément le plus large qui déborde ne semble pas agir sur la largeur du parent table, un peu comme s'il était hors du flux.

Regarde le codepen, j'ai passé la dernière cellule en white-space: nowrap et l'effet est inattendu pour moi.

Il est vrai que je ne suis pas un expert de GRID.
Modérateur
la valeur 1fr oblige le navigateur a calculé les espaces libre en tentant de faire tenir les contenus à l’intérieur de ces espaces. Du coup le conteneur en grid se maintient dans son parent . par defaut, overflow est a visible, ce qui laisse la cellule incompressible, .. debordée de la page Smiley decu

Étonnamment, Firefox et Chrome ont des comportement assez similaire alors je doute que ce soit un bug, inline-grid ou grid, même défaut apparent sur ton codepen en test.
Pour contrecarrer éventuellement ce defaut, il y a flex et flex-shrink:0; a la rescousse pour les parents. ... ça commence a devenir lourd, mais pourquoi pas ?
https://codepen.io/gc-nomade/pen/JgdgoN
Bonjour,

Encore merci pour ton secours.

En fait le défaut n'est pas trop grave car mes fonds sont transparents et il n'y a pas de border à droite.

Les border horizontales ne vont pas jusqu'à l'extrémité droite de l'écran, mais ces bordures sont un gris très léger et ce n'est pas choquant.

Ta solution est parfaite mais comme tu dis cela devient un peu lourd, je vais donc rester avec ce petit problème.

J'ai fait un essai sur des navigateurs qui ne reconnaissent pas GRID : IE ou Edge.
L'affichage en mode table se fait bien, je dois juste opérer quelques petites corrections de façon à ce que la media-query ne comporte que des déclarations GRID qui sont simplement ignorées, se débrouiller pour ne pas toucher au padding par exemple.
Pages :
Sujet clos
Aller à