1301 sujets

Web Mobile et responsive web design

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)
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.
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.
Modifié par boteha_2 (16 Jul 2019 - 22:07)
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é.
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)