Responsive CSS table Résolu/Fermé

Question

Bonjour, J'ai créé la table qu'on peut voir ici https://www.rudyv.be/Aquarium/Accueil.php Elle est constituée d'une grande table (bords invisibles) qui contient un seul et 3 dans chaque je mets 2 tables qui se retrouvent l'une en dessous de l'autre j'ai mis le principe de ce code plus bas; les couleurs, épaisseurs des bords, ... sont définis par CSS. Sur grand écran ça fonctionne très bien, mais sur Smartphone c'est trop large. Comment obtenir la même chose sur grand écran mais avec toutes petites tables les unes en dessous des autres sur petit écran ? J'ai essayé ceci https://www.rudyv.be/Aquarium/AccueilM.php mais c'est moche. Les .css portent le même nom (sauf .css au lieu de .php). Grand merci d'avance pour votre aide

....

Autre petite table

jordane45 · Answer

Bonjour
La réponse est dans la question... Il faut rendre ton site responsive.
A noter qu'on n'utilise plus des tableaux pour faire la mise en page depuis des lustres...
Tourne  toi vers un système de grid ou même le framework bootstrap.

Herve_be · Answer

Bonjour,
"Il faut rendre ton site responsive"
Ma question est : comment ?

J'ai bien trouvé des infos pour rendre un site dépendant de l'écran mais je ne comprends pas ce que je dois faire pour obtenir ce que je souhaite, c'est la raison pour laquelle je demande de l'aide.

Herve_be · Answer

Je voudrais comprendre ce que je fais et pas avoir un CSS tout fait inextricable auquel je ne comprends rien.
Je voudrais simplement obtenir les 6 tables qu'on voit ici https://www.rudyv.be/Aquarium/Accueil.php 
organisées comme ceci sur grand écran
ABC
DEF
comme cela sur petit
A
D
B
E
C
F

Herve_be · Answer

J'ai fait ceci, je suis satisfait du résultat

div.main { width: 1220px; margin: 0 auto; background-color:var(--MainDivBkgnd); border-style:none;}
.Banniere {width: 1200px; display: block; padding-top: 10px; padding-bottom: 10px; margin: 0 auto; }

...

/* Nouvelles règles si la fenêtre fait au plus 1024px de large */
@media screen and (max-width: 1024px)
{
	div.main { width: 720px;} 
	.Banniere {width: 700px;} 
...
}

Herve_be · Answer

Par contre elle s'affiche toujours comme ceci
ABC
DEF
seule la taille diffère, je n'ai pas compris comment je pourrais l'afficher de lamême manière sur grand écran et comme ci-dessous sur petit 
A
D
B
E
C
F

Herve_be · Answer

Bonjour,
Plutôt que 2 dimensions comme j'ai fait :  1.200 px qui devient 700 px si l'écran mesure moins de 1.024 px
j'aurais voulu que la dimension de la table soit proportionnelle à celle de l'écran
càd déclarer que la taille de l'écran (avec un max de 1.200 px) = 100%
et définir toutes les autres dimensions en pourcentage par rapport à ces 100%
pouvez-vous m'y aider ?

Herve_be · Answer

Personne ne sait comment on peut afficher des éléments de taille proportionnelle à celle de l'écran ?

Herve_be · Answer

Merci pour ta réponse qui va bien m'aider.
Tu m'as appris l'existence des unités vw et vh : je peux les utiliser pour afficher des éléments de taille proportionnelle à celle de l'écran, c'est ce que je cherchais, je vais essayer.

Je n'ai pas viré les tables et 1200px parce que ma fenêtre comporte une image de fond; si l'écran est plus large que 1200 px on peut montrer le fond derrière une table plus petite que le fond; si l'écran est moins large que 1200 px alors la table doit occuper toute la largeur de l'écran, le fond étant complètement masqué par la table; 1200 px étant, je le reconnais, une valeur arbitraire et ce n'est plus vraiment du Responsive quoique je puisse connaître la largeur de l'écran grâce aux media queries.

Herve_be · Answer

Voilà, ça fonctionne
- pour les écrans plus larges que 1200 pixels la table mesure 1200 px de large, on voit l'image de fond;
- pour les écrans plus petits les largeurs sont définies en vw, la table occupe toute la largeur.

Responsive CSS table

9 réponses

Discussions similaires