Solution CSS pour éviter le scrolling horizontal des tableaux dans Ghost
Code à injecter pour éviter le scolling horizontal des tableaux dans Ghost.
Ce bout de code pourrait vous être utile si vous avez un blog Ghost.
Dans l'article sur la différence entre data lake et data warehouse publié il y a quelques jours, se trouve un tableau avec des phrases longues. Dans les tableaux par défaut de Ghost avec le thème source (v1.5.0), il n'y pas de saut de ligne. Ce qui oblige parfois à scroller horizontalement. J'ai une solution pour corriger ça.
Avant
| col1 | col2 | col3 | col4 |
|---|---|---|---|
| Exemple | Pour lire le contenu de ce premier tableau, vous allez devoir scroller latérallement. | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed consequat ultrices neque et dignissim. Morbi pharetra ultricies cursus. Sed sollicitudin diam tortor, a elementum justo facilisis ut. In ac pharetra ligula. Morbi eu arcu eget mauris pharetra euismod. Ut dapibus mi vel sapien scelerisque, sit amet pellentesque dolor vestibulum. Suspendisse. | Bravo, vous êtes au bout. |
Ci-dessous, un capture d'écran au cas où le style général du blog changerait.
Code
Pour éviter ça, j'ai injecté le code suivant dans la panneau à droite dans l'édition de post : Post settings > Code injection.
<style>
.custom-table th, .custom-table td {
overflow-wrap: anywhere;
white-space: normal;
}
</style>
Il faut aussi attribuer la classe au tableau en éditant le code HTML du tableau dans le post : <table class="custom-table">
Je joue aussi avec la largeur des colonnes : <th style="width:22%">
Résultat
| col1 | col2 | col3 | col4 |
|---|---|---|---|
| Exemple | Tout le contenu de ce deuxième tableau est visible directement. | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed consequat ultrices neque et dignissim. Morbi pharetra ultricies cursus. Sed sollicitudin diam tortor, a elementum justo facilisis ut. In ac pharetra ligula. Morbi eu arcu eget mauris pharetra euismod. Ut dapibus mi vel sapien scelerisque, sit amet pellentesque dolor vestibulum. Suspendisse. | C'est mieux comme ça. Non ? |
