Responsive sur tableau

Résolu

MalonTails Messages postés 86 Date d'inscription Statut Membre Dernière intervention -
MalonTails Messages postés 86 Date d'inscription Statut Membre Dernière intervention - 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

Afficher la suite

A voir également:

Responsive sur tableau
Tableau word - Guide
Tableau ascii - Guide
Trier un tableau excel - Guide
Imprimer tableau excel sur une page - Guide
Tableau croisé dynamique - Guide

1 réponse

Réponse 1 / 1

elgazar Messages postés 5841 Date d'inscription Statut Membre Dernière intervention 1 326

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 Statut Membre Dernière intervention

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 Statut Membre Dernière intervention 1 326 > MalonTails Messages postés 86 Date d'inscription Statut Membre Dernière intervention

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 Statut Membre Dernière intervention > elgazar Messages postés 5841 Date d'inscription Statut Membre Dernière intervention

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 Statut Membre Dernière intervention > MalonTails Messages postés 86 Date d'inscription Statut Membre Dernière intervention

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

elgazar Messages postés 5841 Date d'inscription Statut Membre Dernière intervention 1 326 > MalonTails Messages postés 86 Date d'inscription Statut Membre Dernière intervention

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

Formule taux de marque

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

Tableau croisé dynamique - absence de certaines données

generateur de combinaison du loto 5/90

Votre réponse

Discussions similaires