Bonjour,

Alors pour mon site j'ai un tableau de 4 colonnes et une ligne. Cependant pour ma version mobile j'aimerai que les colonnes soit les une sur les autres soit 1 colonne sur 4 ligne. J'ai testé plusieurs code mais ça ne fonctionne pas 

Mon code actuel :

@media  screen and (max-width: 375px)

{


body{width: 375px;}
#tab{display: block;}
}

 J'utilise un id pour le tableau car j'ai sur d'autres page d'autres tableaux. le div étant tab ici. Chaque colonne a une classe (donne,donne2,donne3 et donne4).

donc avant j'utilisais .donne{width:375px;} Par exemple mais vu que le changement n'opère pas je l'ai pas mis.

Merci à ceux qui pourront m'aider.

Bonjour,

pour aplanir un tableau, il faut toucher à table, tbody, tr et td : pour chacun (bien entendu, en mettant ton id en parent), on doit mettre display: block.

Merci pour la réponse! De ce fait pour mettre mon id en parent je dois faire tab.table{display:block;}. Desolee si la question est vraiment très stupide

Ya pas de questions stupides

Alors :

• Tu n'es pas forcé⋅e de préciser "table" si ta table a un id, par contre pour les enfants oui.
• Là, comme tu l'as écrit, ce serait un élément "tab" de classe "table", ce n'est pas ce que tu cherches.
• Je te conseille de ne pas utiliser les id mais plutôt les classes, à cause de la spécificité des sélecteurs CSS (les id sont beaucoup trop lourds et difficiles à surcharger).

Merci beaucoup pour la réponse détaillée ! Ici mon tableau a pour id tab et chaque colonne donc td a pour classe donne,donne2,donne3 et donne4

Pour les mettre les une au dessus des autres je dois alors faire td.donne{display:block;} ?

en gros pour mon code ça me fait 

<table border="2" id="tab">


  <tr><td class="donne">
Info
</td>
<td class="donne2">
Info 2</td>
 <td class="donne3">
Info 3
</td>
 <td classe="donne4">Info 4
</td>
</tr>
</table>

Non non, simplifie :

#tab,
#tab tbody,
#tab tr,
#tab th,
#tab td {
  display: block;
}

(et supprime ce vilain "border=2", c'est invalide)

Je viens de penser à une chose : qu'y a-t-il dans tes colonnes de tableau ? Tu l'utilises pour de la mise en page ou bien ce sont des données tabulaires ?

Ah mince même en copiant collant ça ne fonctionne pas :/

XD ça marche je supprime cette cochonnerie alors

Et dedans c'est des données qui sont entrés dans le code, ici a la place de info , info 2 ect ... ( jai mis ça pour que ça soit lisible )

J'envoie un screen du rendu mobile

.

et le resultat que je cherche a avoir est celui-ci ( le pire c'est qu'il marche sur responsivator ou j'avais testé avant d'heberger ) 

-
Edité par Mei 18 août 2017 à 23:01:21

Oui, alors ce que je vois c'est un tableau de mise en page, et c'est mal. Je t'enjoins à utiliser des div et du CSS pour styler tout ça (par exemple avec le module Flexbox).

Merci beaucoup je viens de regarder flexbox et ça a l'air vraiment tres simple (beaucoup plus simple xD ) merci !! Merci pour les réponses rapides et les explications

Je t'en prie

Tiens-nous au courant de ton avancée !

Pas de soucis, j'ai plus cas bien faire la mise en page mais ça s'aligne comme je veux sur la version standard et comme je veux sur la mobile! merci encore