Les tableaux larges deviennent compressés dans les pages publiées

Soutien
1

Salut tout le monde,

J’ai essayé d’améliorer l’apparence de mes pages publiées, car il semble que les tableaux larges soient très compressés.

Le tableau affiche le nombre total de titulaires de permis de conduire âgés de 16 ans et plus avec un permis de classe 1 par étape de 2012 à 2021. Le tableau contient des colonnes pour les données complètes sur les apprenants, les données de correspondance ouverte/id, les données de correspondance ouverte/id et les données de correspondance ouverte/id, ainsi que les pourcentages pour chacune. (Légendé par l'IA)
Le tableau affiche le nombre total de titulaires de permis de conduire âgés de 16 ans et plus avec un permis de classe 1 par étape de 2012 à 2021. Le tableau contient des colonnes pour les données complètes sur les apprenants, les données de correspondance ouverte/id, les données de correspondance ouverte/id et les données de correspondance ouverte/id, ainsi que les pourcentages pour chacune. (Légendé par l'IA)1274×1258 75.3 KB

modification : voici le lien de la page

J’ai essayé d’utiliser CSS pour créer des bordures de tableau et pour maximiser les largeurs de tableau
mais je pense que la page publiée n’affiche pas les composants du thème :smiling_face_with_tear:

Des idées sur la façon de rendre les tableaux larges plus attrayants ?

modification 2 : les vues publiées des pages sont-elles stockées ?

2

Les CSS devraient toujours fonctionner sur les pages publiées - ce sont juste les JavaScript et autres qui ne le font pas.

Elle a cependant des classes spécifiques (bien sûr).

2 « J'aime »
3

Il y a deux problèmes avec cette page publiée et le tableau.

Le content-wrapper semble un peu petit.

Vous pourriez essayer de l’ajuster en jouant avec max-width (première partie du CSS), vous pouvez changer la valeur, cela devrait toujours être responsive.

Ensuite, le width: 100% du tableau ne fonctionne pas, probablement parce que le CSS est un peu différent sur la page publiée. J’ai ajouté une deuxième partie dans le CSS personnalisé pour corriger cela.

Voici le code :

.published-page {
  .published-page-content-wrapper {
    max-width: 1200px;
    width: 100%;
  }
  .md-table .table {
    width: 100%;
  }
}
3 « J'aime »
4

Wow merci ! Le code rend la page beaucoup plus belle ! Mais le tableau semble toujours un peu écrasé ? D’autres idées ?

image
image2807×1076 261 KB

Voici à quoi cela ressemble sur la plateforme :

image
image1455×1465 197 KB