[Résolu] Largeur de <tr>

Bonjour à tous
Je suis en train de travailler à rendre responsive un site ancien.
Dans le code original, le calendrier des activités de l'association est une <table>.
Mon objectif est de générer en JavaScript
- une <table> si la largeur de l'écran le permet
- sinon une liste <ul> contenant des <li> avec des liens permettant d'afficher un à un le détail de chaque évènement du calendrier.
Le code JavaScript génère les deux balises, celle qui s'affiche est déterminée par mediaquery.

Ça commence à fonctionner comme je l'espère, mais je tombe sur le problème suivant:
dans la version "écran large", la <table> fait toute la largeur de l'écran soit 1222px sur mon écran de travail, mais les <tr> qu'il contient ne font que 1043px de large, mesures indiquées par l'outil de développement de FireFox.
En regardant le HTML généré, je ne trouve aucune raison à ce phénomène étrange, qui devrait tout de même sauter aux yeux !
Quelqu'un pourrait il m'aider à détecter mon erreur?
La page de test: https://tests.alma-musica.net/tests/cal-test.php

Merci de votre aide.

Bonjour,

Mon firefox me dit même largeur pour tout le monde (table, tr etc.).

Sinon, remarque en passant concernant les table, tr, td transformés en ul et li, je n'étais pas intervenu lors de ton sujet sur cette question (n'ayant pas sous les yeux le site cible), mais il me semble que tu aurais pu garder tes table, tr, td sur les écrans étroits (au vu du site cible), en changeant simplement le display de ces éléments :

table, tr, td {display:block;}

Tu obtiens alors un affichage du contenu des tables sur une seule colonne direct !

Moyennant quelques adaptations cosmétiques supplémentaires de style sur le contenu des tables, ça me semble devoir être lisible sans problème sans avoir besoin de passer par cette mécanique compliquée à base d'ul et li.

Amicalement,
Modifié par parsimonhi (23 Dec 2018 - 11:46)

A supprimer
Modifié par PapyJP (23 Dec 2018 - 14:55)

Bonjour,

PapyJP a écrit :

Quelle largeur? ça devrait faire 100% de la largeur de l'écran

Largeur complète de l'écran chez moi.

Vide soigneusement ton cache déjà !

Amicalement,

parsimonhi a écrit :
Mon firefox me dit même largeur pour tout le monde (table, tr etc.).

Quelle largeur? ça devrait faire 100% de l'écran, voici ce que ça donne, il y a une bande blanche à droite, ça se voit mal sur la capture d’écran.

parsimonhi a écrit :
Sinon, remarque en passant concernant les table, tr, td transformés en ul et li, je n'étais pas intervenu lors de ton sujet sur cette question (n'ayant pas sous les yeux le site cible), mais il me semble que tu aurais pu garder tes table, tr, td sur les écrans étroits (au vu du site cible), en changeant simplement le display de ces éléments :

table, tr, td {display:block;}

Tu obtiens alors un affichage du contenu des tables sur une seule colonne direct !

Moyennant quelques adaptations cosmétiques supplémentaires de style sur le contenu des tables, ça me semble devoir être lisible sans problème sans avoir besoin de passer par cette mécanique compliquée à base d'ul et li.

Sauf que ce 'est pas ce que je veux obtenir, c'est pourquoi j'ai fait ceci:

Quand on clique sur un des gros boutons, on obtient ceci :

La mise en page est à régler, mais avant je voudrais au moins régler le fichu problème en mode écran large.
Modifié par PapyJP (23 Dec 2018 - 12:07)

Bonjour,

Oups, je n'avais pas essayé avec une fenêtre assez large.

Effectivement, pour les fenêtres très larges, le "Activités
Décembre 2018 à Janvier 2019" (mais qui est un h1) fait toute la largeur de la fenêtre, ainsi que la table , mais le reste reste bloqué à une largeur max de 1147px.

Amicalement,

Bonjour,

Table fait 100% de son conteneur.

Mais les tr ne s'étendent en largeur que s'ils en ont besoin (sauf mention contraire dans le css). Chez moi, ils peuvent afficher tout leur contenu sur une seule ligne avec 1147px. Ils sont fainéants ensuite et arrêtent de s'étendre.

EDIT: les tr ne s'étendent en largeur que s'ils en ont besoin dans le cas de ton site.

Amicalement,
Modifié par parsimonhi (23 Dec 2018 - 12:22)

parsimonhi a écrit :
Bonjour,

Il semble que ce soit le table {display:block;} que tu as dans ton css qui provoque ce phénomène.

Amicalement,

Effectivement, c'est bien la c... que j'ai introduite en ajoutant le @media à la fin de la feuille.
Merci !!
Modifié par PapyJP (23 Dec 2018 - 12:30)

Bonjour,

Bon bah voilà, j'aurais fait quelque chose d'utile de mon dimanche

EDIT: la raison profonde de ce phénomène me semble être que du fait que la table avait un display forcé à block dans le css, le navigateur a certainement généré une balise table bidon autour des balises tr et td. Cette table bidon n'ayant aucune raison de faire la largeur de la fenêtre, contrairement à la vraie table qui ayant un display block s'est étendue naturellement à toute la largeur disponible, l'expansion des tr s'est limitée à ce dont ils avaient besoin pour afficher leurs contenus.

Amicalement,
Modifié par parsimonhi (23 Dec 2018 - 12:42)

Excellente analyse !