Responsive CSS table

Résolu
Herve_be Messages postés 1110 Date d'inscription   Statut Membre Dernière intervention   -  
Herve_be Messages postés 1110 Date d'inscription   Statut Membre Dernière intervention   -
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 <TR> et 3 <TD>
dans chaque <TD> 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 

<TABLE>
     <TBODY>
          <TR>
               <TD>
               <table>
                    <tbody>
                         <tr>
                              <td>....</td>
                         </tr>
                    </tbody>
               </table>
               <table>
                    <tbody>
                         <tr>
                              <td>....</td>
                         </tr>
                    </tbody>
               </table>
               </TD>
               <TD>
                    Autre petite table
               </TD>
               <TD>
                    Autre petite table
               </TD>
          </TR>
     </TBODY>
</TABLE>

9 réponses

Réponse 1 / 9
jordane45 Messages postés 38484 Date d'inscription   Statut Modérateur Dernière intervention   4 751
 
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.

0
Réponse 2 / 9
Herve_be Messages postés 1110 Date d'inscription   Statut Membre Dernière intervention   9
 
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.
0
jordane45 Messages postés 38484 Date d'inscription   Statut Modérateur Dernière intervention   4 751
 
C'est pour ça que je t'invite à te tourner vers le framework css Bootstrap.
Il est conçu pour être responsive ...
Tu peux même trouver des sites qui te permettent de générer le "design"
par exemple : https://www.layoutit.com/build
0
Réponse 3 / 9
Herve_be Messages postés 1110 Date d'inscription   Statut Membre Dernière intervention   9
 
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
0
jordane45 Messages postés 38484 Date d'inscription   Statut Modérateur Dernière intervention   4 751
 
Si tu veux tout coder toi même sans passer par des outils qui facilitent la vie.... et bien... tu n'as plus qu'une seule solution : Te former !

Il faut apprendre à utiliser les media queries
https://www.alsacreations.com/article/lire/930-css3-media-queries.html
https://www.google.com/search?q=tuto+css+responsive

Bon aprentissage.

Pour rappel : Ici on ne donne pas de code tout cuit.
Et puis, vu que tu veux apprendre ( et comprendre) ça n'aurait pas d'interet.
Donc, en effet, dans ton cas, il vaut mieux que tu suives des tutos pour apprendre.
0
Réponse 4 / 9
Herve_be Messages postés 1110 Date d'inscription   Statut Membre Dernière intervention   9
 
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;} 
...
}
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 9
Herve_be Messages postés 1110 Date d'inscription   Statut Membre Dernière intervention   9
 
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
0
Réponse 6 / 9
Herve_be Messages postés 1110 Date d'inscription   Statut Membre Dernière intervention   9
 
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 ?
0
Réponse 7 / 9
Herve_be Messages postés 1110 Date d'inscription   Statut Membre Dernière intervention   9
 
Personne ne sait comment on peut afficher des éléments de taille proportionnelle à celle de l'écran ?
0
helpinghands
 
Salut,
"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% "

Quelle table vu que vous les avez virés. Au passage le div aussi est à éviter depuis HTML5 sauf si les éléments contenus n'ont aucune "valeur" particulière(ce ne sont pas des éléments à repérer dans la page).
Vous avez les balise article et section par exemple qui définissent des sections ou articles de la page.

pourquoi 1200px ça correspond à quoi? quelqu'un qui a un écran en 800X600 ou en
2 515X886 les 1200 px seront trop grand ou trop petit pour un affichage correct.
Il y a aussi le ratio largeur hauteur qui rentre en compte. Par exemple parmi les formats les plus fréquents il y a le 2/3, 4/3, 16/9 donc idem 1200 de largeur sur un écran avec un autre ratio que celui que vous utilisez ça change la mise en page et ça s'appelle un bug d'affichage si tout n'est pas identique(proportionnellement) d'un écran à l'autre.

Une valeur en pixel ne peut pas être responsive puisqu'elle est fixée(absolue) et ne changera jamais.

Il ne faut pas utiliser de valeur dans une taille fixe mais bien proportionnelle comme ...heum le pourcentage pour une valeur en pourcentage, ou pour les lignes le quadratin(em).
Ce n'est pas responsive mais scalaire ou proportionnel ce qui est déjà un bon pas en avant.

https://www.w3.org/Style/Examples/007/units.fr.html

https://www.w3schools.com/css/css_units.asp


Responsive ça veut dire s'adapter à tous les écrans et les écrans ayants différentes tailles/ratio ou orientation(paysage ou portrait). Les media queries ça permet de faire différentes mises en pages selon des "paliers" définis par vous même.

Et pour ça il y a des liens plus hauts...regardez la réponse plutôt que de poser la même question...
0
Réponse 8 / 9
Herve_be Messages postés 1110 Date d'inscription   Statut Membre Dernière intervention   9
 
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.
0
Réponse 9 / 9
Herve_be Messages postés 1110 Date d'inscription   Statut Membre Dernière intervention   9
 
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.
0

Discussions similaires

Table des matières dont les titres n'apparaissent pas..
Synua -
ggg -

10 réponses
Intégrer une table des annexes et des matières sur word
clairon69 -
Jo -

20 réponses
insérer une table d'illustration
wood15 -
Cloe -

8 réponses
Sommaire + Table des matières + Table des Annexes
Ilona.L -
gbo -

2 réponses
WOrd 365 Liste des figures et annexes
Tartealacreme_8509 -
Tartealacreme_8509 -

2 réponses