Responsive sur tableau

Résolu/Fermé

MalonTails Messages postés 86 Date d'inscription mercredi 26 avril 2017 Statut Membre Dernière intervention 26 avril 2021 - Modifié le 20 mai 2017 à 19:52
MalonTails Messages postés 86 Date d'inscription mercredi 26 avril 2017 Statut Membre Dernière intervention 26 avril 2021 - 22 mai 2017 à 21:42

Bonjour,

J'aimerai savoir comment faire en sorte que la taille du tableau de ma feuille de style principale ne soit pas prise en compte dans mon medias quierie pour version mobile.

Je m'explique , j'ai un tableau sur mon site mais quand je veux l'adapter aux version mobiles la taille des cellules prises en compte est celle de ma feuille de style principale ce qui fais moche sur la version mobile.De plus le tableau est trop grand pour la version mobile et dépasse du cadre :/

Le code de la feuille de style principale :

table {

    width: 100%;
    height:32.5%;
    background-color:#EEEEEE;


}
td{width: 25%;}

celle de ma version mobile ( iphone 6 )

 table {

     width: 100%;


 }
td{
  display: block;
  border-bottom: 2;


}

Je met en photo ci joint le resultat sur ma page principale et sur la version mobile.

version standard :

Version mobile :

Merciiii :D

A voir également:

1 réponse

Réponse 1 / 1

elgazar Messages postés 5841 Date d'inscription mercredi 30 octobre 2013 Statut Membre Dernière intervention 17 mars 2021 1 322
21 mai 2017 à 13:25

Bonjour
il faut justement utiliser les media querries pour indiquer au navigateur quels css utiliser selon la taille de l'écran
par exemple

@media screen and (max-width: 1000px) {
 code css pour un écran en mode portrait
}

dans cet exemple, tous les écrans ayant moins de 1000 pixels de large (ce qui correspond au mode portrait) utiliseront ces css, tu peux évidemment créer plusieurs règles en combinant min-width et max width par contre bien souvent tu va etre obliger de d'adapter le tableau car si tu peux faire entrer 5 cellule en largeur sur le mode paysage, cela sera difficile ou illisible de le faire dans un écran en mode portrait

MalonTails Messages postés 86 Date d'inscription mercredi 26 avril 2017 Statut Membre Dernière intervention 26 avril 2021
Modifié le 22 mai 2017 à 13:37

justement je n'avais pas mis tout mon code mais j'ai spécifié la taille de l'écran au début

@media screen and (max-width: 375px) and (max-height: 667px)
{
 body { width: 100%;background-color:#F5EFFB;}


 table {

width: 100%;


 }
td{
  display: block;
}
}

elgazar Messages postés 5841 Date d'inscription mercredi 30 octobre 2013 Statut Membre Dernière intervention 17 mars 2021 1 322 > MalonTails Messages postés 86 Date d'inscription mercredi 26 avril 2017 Statut Membre Dernière intervention 26 avril 2021
Modifié le 22 mai 2017 à 16:33

vérifie si tu n'a pas une div qui soit en pixels ailleurs dans le code ce qui expliquerait pourquoi ton tableau prends plus que la largeur de l'écran

MalonTails Messages postés 86 Date d'inscription mercredi 26 avril 2017 Statut Membre Dernière intervention 26 avril 2021 > elgazar Messages postés 5841 Date d'inscription mercredi 30 octobre 2013 Statut Membre Dernière intervention 17 mars 2021
Modifié le 22 mai 2017 à 17:09

je verifie et je vois pas ou est le probleme :/

@media screen and (max-width: 375px) and (max-height: 667px)
{
 body { width: 100%;background-color:#F5EFFB;}

td{width: 100%; display: block;}

.donne{width:100%;}

version standard :

table {

    width: 100%;
    height:32.5%;
    background-color:#EEEEEE;

}
.donne{width:25%}
.donne2{width:25%}
.donne3{width:25%}
.donne4{width:25%}

le tableau :

<table border="2">


  <tr><td class="donne">contenu</td>
  <td class="donne2"> contenu</td>
    <td class="donne3">contenu


</td>
  <td classe="donne4" >contenu
</td>
</tr>

</table>

MalonTails Messages postés 86 Date d'inscription mercredi 26 avril 2017 Statut Membre Dernière intervention 26 avril 2021 > MalonTails Messages postés 86 Date d'inscription mercredi 26 avril 2017 Statut Membre Dernière intervention 26 avril 2021
22 mai 2017 à 17:11

ca donne ce tableau vers le bas on voit que la derniere cellule prend de la place , et en haut les écritures dépassent de la marge

essaye en enlevant le display block, cela peut aussi venir de la taille de la police si elle est en pixel au lieu du em

Discussions similaires

ou sont les bananes ?

Impossible d'afficher le rapport de tableau croisé dynamique sur un rapport

Nom de champs du tableau croisé dynamique non valide

generateur de combinaison du loto 5/90

Bibliothèque

Discussions similaires

Newsletters