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

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)

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.

tu peut essayer en enlevant la largeur indiquée., sinon, reformater en grid et en donnant au moins une largeur à la première cellule https://codepen.io/anon/pen/mZYGwM

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.

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 ) 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,

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é.

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,

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.