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

(reprise du message précédent)

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.

Bonjour , si tu part sur le tableau , tu peut filtrer ta mediaquerie en te basant sur le support de display:contents .

@supports (display: contents) {
  /* @media ... pour les grid */
}

ou plus logique

@media .... {

     /* CSS pour tout le monde , largeur tableau , marges, ...*/
     
    @supports (display: contents) {
           /* remise en forme a l'aide de grid et contents */
      }
}

Bonjour,

Oui, bonne idée.

En fait je me suis arrangé pour que la mediaquerie ne comporte pour le tableau que des déclarations Grid en plus de display: contents.

Je pense que le navigateur qui ne comprend pas display: contents ne comprend par Grid et inversement celui que ne comprend pas Grid ne comprend pas display: contents.

Donc la mediaquerie doit n'avoir aucun effet sur les anciens navigateurs et la mise en page table s'affiche correctement. Vérifié sur IE et Edge.

Le mauvais cas est bien sûr un navigateur qui comprend Grid et pas display: contents, ou inversement.

il n'y a pas si longtemps, il n'y avait que Firefox pour comprendre display:contents, ...mais tu peux faire ton mediaquery sur grid et contents

@supports (display:content)  and (display:grid) {
   /* style */
}

Modifié par gcyrillus (24 Jul 2019 - 14:48)

Bonjour,

Encore une bonne idée même si cela devient peut-être un peu lourd.

Je vais vérifier que cela n'a pas d'impact sur les performances.

Autrement j'ai un dernier petit problème que je n'arrive pas à reproduire sur le codepen.

Cela concerne l'alignement vertical du texte entre la cellule Deux et la cellule à droite Titre Deux.

En display table c'est facile vertical-align: middle.
En display: grid Deux qui en fait est un pseudo-élément ::before s'affiche trop haut.

Quelle piste pour contrôler l'alignement vertical en display: grid ?

Si nécessaire je publie un lien vers mon site de test mais il y a pas mal de code.

boteha_2 a écrit :
Bonjour,

Encore une bonne idée même si cela devient peut-être un peu lourd.

Je vais vérifier que cela n'a pas d'impact sur les performances.

Autrement j'ai un dernier petit problème que je n'arrive pas à reproduire sur le codepen.

Cela concerne l'alignement vertical du texte entre la cellule Deux et la cellule à droite Titre Deux.

En display table c'est facile vertical-align: middle.
En display: grid Deux qui en fait est un pseudo-élément ::before s'affiche trop haut.

Quelle piste pour contrôler l'alignement vertical en display: grid ?

Si nécessaire je publie un lien vers mon site de test mais il y a pas mal de code.

grid peut-être imbriqué ou avoir des élément flex comme enfants , par exemple en reprenant le dernier codepen https://codepen.io/gc-nomade/pen/JgdgoN :

  tr + tr td:first-child {
    grid-row: span 2;
    /* flex pour aligner le contenu */
    display:flex;
    align-items:center;
  }

Bonjour,

Merci, je vais essayer pendant le week-end.

Autrement j'ai mis en place : @supports (display:contents) and (display:grid).

Le temps de réponse n'est visiblement pas affecté, donc je laisse.

Je te tiens informé.

Bonjour,

 tr + tr td:first-child {
    grid-row: span 2;
    /* flex pour aligner le contenu */
    display:flex;
    align-items:center;
  }

Ton code fonctionne très bien mais je me suis mal exprimé ce n'est pas l'effet recherché.
Je veux que Deux soit aligné sur Titre deux ce qui se passe sans aucune déclaration dans le codepen sauf que dans le réel le code est plus complexe

J'ai trouvé quelque chose qui fonctionne sans que je sache bien pourquoi.

td.dia::before {content: "\2022"; font-size: 1.5em; vertical-align: middle}

@media screen and (max-width: 480px)
{
@supports (display: contents) and (display: grid)
{
// display: contents, display: inline-grid, etc

td.dia::before {vertical-align: -40%}

}
}

Bonjour,

Tout a l'air de bien marcher et j'ai mis en production.

Je te remercie encore pour ton aide très précieuse.

Je coche Résolu.
Modifié par boteha_2 (31 Jul 2019 - 18:32)