5568 sujets

Sémantique web et HTML

[Résolu] Changer l'ordre d'affichage des colonnes d'un tableau

Bonsoir tout le monde,

Je cherche désespérément une solution à ma question, je viens vous voir en désespoir de cause, après avoir essayé .... au moins tout ça.

Sur mon site, j'ai un tableau de données où les colonnes les plus intéressantes sont la première et la dernière.
Sur un écran large (desktop ou paysage), pas de problème, la dernière colonne est bien visible, mais sur des écrans étroits (smartphone mode portrait), la dernière colonne dépasse de l'écran et n'est plus lisible.
Comme le texte de la colonne 1 est de longueur variable, je cherche une solution pour, sur les écrans étroits, changer l'ordre des colonnes (basculer la dernière colonne en 2ème).

L'un d'entre vous aurait-il une idée, une piste ?

ps : Site en HTML5, PHP sous-jacent, CSS avec media-queries, javascript accessoire.
Modérateur
Bonsoir,

sans ton code , difficile de t'orienter.
Cependant voici un code exemple qui passe d'un affichage en tableau à un affichage en grid permettant de changer l'ordre d'affichage des éléments d'une grille .

Peut-être avait tu tenter quelque chose de similaire. https://codepen.io/gc-nomade/pen/eYVGZZg mais que cet exemple ne ressemble pas à ta réalité Smiley smile ?(flex marcherait aussi ici )

cdt
Bonsoir,

exemple d'une page qui passe bien sur un écran étroit :
https://flamme.philatelique.ouvaton.org/test/aff_recherche.php?choix_recherche_radio=4&Nom_Ville=&Nom_Departement=&Num_Departement=&Nom_Type=&Double=&Nom_Pays=&echangeable=o&var_tri=VA&num_page=9

exemple d'une page qui dépasse :
https://flamme.philatelique.ouvaton.org/test/aff_recherche.php?choix_recherche_radio=4&Nom_Ville=&Nom_Departement=&Num_Departement=&Nom_Type=&Double=&Nom_Pays=&echangeable=o&var_tri=VA&num_page=10

Su un écran large (Desktop), les 2 sont OK, mais sur un écran étroit la 2? page dépasse (la 1ère colonne étant plus large).

Je vais regarder le lien fourni si ca correspond.
Modérateur
Bonjour,

Les pages en liens ne s'affichent depuis chez moi. : échec de la connexion sécurisée.
Cdt
Bonsoir,

Vous pouvez accéder au site en utilisant le HTTP :

exemple d'une page qui passe bien sur un écran étroit :
http://flamme.philatelique.ouvaton.org/test/aff_recherche.php?choix_recherche_radio=4&Nom_Ville=&Nom_Departement=&Num_Departement=&Nom_Type=&Double=&Nom_Pays=&echangeable=o&var_tri=VA&num_page=9

exemple d'une page qui dépasse :
http://flamme.philatelique.ouvaton.org/test/aff_recherche.php?choix_recherche_radio=4&Nom_Ville=&Nom_Departement=&Num_Departement=&Nom_Type=&Double=&Nom_Pays=&echangeable=o&var_tri=VA&num_page=10
Modérateur
Bonjour,

Il manque une accolade de fermeture pour 
/* Cacher la colonne "Nom Département" si écran rétrécit encore*/
/* @media (max-width: 650px) { */
@media (max-width: 47rem) {
    table{font-size:1rem;}
    table tr th:nth-of-type(3),
    table tr td:nth-of-type(3) {
        display: none;
    }
}/* cette accolade est manquante */


Ensuite, peut-être réduire la taille de la police en premier lieu ?
/* Cacher la colonne "Nom Département" si écran rétrécit encore*/
/* @media (max-width: 650px) { */
@media (max-width: 47rem) {
    table{font-size:1rem;}
    table tr th:nth-of-type(3),
    table tr td:nth-of-type(3) {
        display: none;
    }
}


Mettre à jour le table-layout et largeurs de certaines cellules par exemple à partir d'une certaine largeur.
@media (max-width: 28rem) {
/* @media (max-width: 350px) { */
/*     Diminuer encore la taille de la colonne type pour gagner encore plus de place */
    table {table-layout:fixed;width:90vw}
    table tr :first-child{
        width:30%;
    }table tr :last-child{
        width:3em;
        padding:0.25em 0; 
    }
     tr th:nth-of-type(4),
    tr td:nth-of-type(4) {
        overflow: hidden; 
        text-overflow: ellipsis;
        max-width:50px;
        min-width:50px;
    }
/*     N'afficher que les premières lettre de la colonne PAYS pour gagner encore de la place */
     tr th:nth-of-type(5),
    tr td:nth-of-type(5) {
        overflow: hidden; 
        text-overflow: ellipsis;
        max-width:50px;
        min-width:50px;
    }
    

    
}


min et max-width n'ont en principe aucune incidence dans un tableau . En alternative width:clamp(x,x,x); pourrait-être utilisé: https://developer.mozilla.org/fr/docs/Web/CSS/clamp

Cdt
gcyrillus a écrit :
Bonsoir,

sans ton code , difficile de t'orienter.
Cependant voici un code exemple qui passe d'un affichage en tableau à un affichage en grid permettant de changer l'ordre d'affichage des éléments d'une grille .

Peut-être avait tu tenter quelque chose de similaire. https://codepen.io/gc-nomade/pen/eYVGZZg mais que cet exemple ne ressemble pas à ta réalité Smiley smile ?(flex marcherait aussi ici )

cdt


Bonsoir,

Merci pour la réponse, et désolé pour le délai de réponse,
effectivement, ce type de manipulation serait idéal pour moi (tout en CSS, nickel !)
J'ai tenté un essai, mais cela ne semble donner quelque chose que si les colonnes ont une taille fixe. Dommage !
(Je ne suis pas assez bon en CSS pour débugger correctement)
Bonsoir et merci pour le complément d'info,
gcyrillus a écrit :
Bonjour,

Il manque une accolade de fermeture pour 
/* Cacher la colonne "Nom Département" si écran rétrécit encore*/

}/* cette accolade est manquante */


Oups, je ne l'avais pas vu celle-ci. (va falloir que je fasse plus attention Smiley biggol ) Correction effectuée.
gcyrillus a écrit :

Ensuite, peut-être réduire la taille de la police en premier lieu ?

Je ne souhaite pas réduire la taille de la police, car la media-query est dédiée aux écrans de faible largeur où avoir une police de bonne taille est important pour la lisibilité (En plus, ce ne serait qu'un palliatif, il suffirait d'une commune avec un nom encore plus long...)

gcyrillus a écrit :

Mettre à jour le table-layout et largeurs de certaines cellules par exemple à partir d'une certaine largeur.
@media (max-width: 28rem) {
/* @media (max-width: 350px) { */
/*     Diminuer encore la taille de la colonne type pour gagner encore plus de place */
    table {table-layout:fixed;width:90vw}
    table tr :first-child{
        width:30%;
    }table tr :last-child{
        width:3em;
        padding:0.25em 0; 
    }
}


J'ai testé ce point, mais je n'avais pas réussi. Je vais regarder de nouveau.

gcyrillus a écrit :

min et max-width n'ont en principe aucune incidence dans un tableau . En alternative width:clamp(x,x,x); pourrait-être utilisé: https://developer.mozilla.org/fr/docs/Web/CSS/clamp

C'est la seule manière que j'avais trouvé de fixer une largeur de colonne (sur un tableau html standard), mais cela ne semble fonctionner qu'avec une taille fixe (ce qui correspond aux cas ou je restreint la taille de la colonne avec le hoverflow elipsis [Colonne type et Pays])
gcyrillus a écrit :

Cdt


Bonne soirée
Bonsoir,

En fait, ça a l'air de faire le job avec :
table {table-layout:fixed;width:90vw}


Je n'avais pas bien lu les spécifications: J'en étais resté à: "la largeur des colonnes est basée sur la première ligne" (ce qui ne me convenait pas)

Ici, je fixe les largeurs en pourcentage et hop, c'est bon ! Et en plus, c'est plus facile pour moi à gérer.

Aller, un post de résolu Smiley ravi

Et merci beaucoup pour les solutions proposées.
Sujet clos
Aller à