Responsive sur tableau

Résolu
MalonTails -  
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

1 réponse

  1.  elgazar
    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
    1. MalonTails Auteur
      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;
}
}
    2. elgazar
      @MalonTailsvé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
    3. MalonTails Auteur
      @elgazarje 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>
    4. MalonTails Auteur
      @MalonTailsca 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
    5. elgazar
      @MalonTailsessaye 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

Tableau (croisé dynamique?) à 3 entrées
ClementH3o

10 réponses
CALCULS
smart19

4 réponses