Comment créer un tableau responsive avec défilement horizontal dans Divi

Créer une table réactive peut être un défi, surtout si vous avez une table avec beaucoup de colonnes. Un excellent moyen de résoudre ce problème est d'ajouter une capacité de défilement horizontal à la table. Une table à défilement horizontal résout deux problèmes principaux. Tout d'abord, cela permet au concepteur de conserver l'espacement nécessaire pour le contenu du tableau (des colonnes vraiment étroites entraîneront une trop grande accumulation du contenu). Et deuxièmement, il permet à l'utilisateur de visualiser le contenu du tableau facile à lire sur les appareils mobiles.

Dans ce tutoriel, nous allons vous montrer comment utiliser Divi pour créer un tableau entièrement personnalisé avec défilement horizontal. Nous allons vous montrer comment ajouter la fonctionnalité de défilement horizontal aux colonnes qui débordent du conteneur de la table. De plus, nous ajouterons même des boutons de défilement horizontal au tableau pour améliorer l'UX. Tout ça sans plugin !

Commençons.

Aperçu

Voici un aperçu du tableau responsive avec défilement horizontal que nous allons construire dans ce tutoriel.

Téléchargez la mise en page GRATUITEMENT

Pour mettre la main sur les designs de ce tutoriel, vous devrez d'abord le télécharger en utilisant le bouton ci-dessous. Pour accéder au téléchargement, vous devrez vous inscrire à notre liste de diffusion Divi Daily en utilisant le formulaire ci-dessous. En tant que nouvel abonné, vous recevrez chaque lundi encore plus de bienfaits Divi et un pack Divi Layout gratuit ! Si vous êtes déjà sur la liste, entrez simplement votre adresse e-mail ci-dessous et cliquez sur télécharger. Vous ne serez pas « réinscrit » ni ne recevrez d'e-mails supplémentaires.

Télécharger les fichiers

Télécharger gratuitement

Rejoignez la newsletter Divi et nous vous enverrons par e-mail une copie du pack ultime de mise en page de la page de destination Divi, ainsi que des tonnes d'autres ressources, trucs et astuces Divi incroyables et gratuits. Suivez-le et vous serez un maître Divi en un rien de temps. Si vous êtes déjà abonné, saisissez simplement votre adresse e-mail ci-dessous et cliquez sur télécharger pour accéder au pack de mise en page.

TÉLÉCHARGER

Vous vous êtes enregistré avec succès. Veuillez vérifier votre adresse e-mail pour confirmer votre abonnement et accéder aux packs de mise en page Divi hebdomadaires gratuits !

Pour importer la mise en page de la section dans votre bibliothèque Divi, accédez à la bibliothèque Divi.

Cliquez sur le bouton Importer.

Dans la fenêtre contextuelle de portabilité, sélectionnez l'onglet d'importation et choisissez le fichier à télécharger depuis votre ordinateur.

Cliquez ensuite sur le bouton importer.

Une fois cela fait, la disposition des sections sera disponible dans le Divi Builder.

Passons au tutoriel, voulez-vous ?

Ce dont vous avez besoin pour commencer

Pour commencer, vous devrez effectuer les opérations suivantes :

1. Si vous ne l'avez pas encore fait, installez et activez le thème Divi.
2. Créez une nouvelle page dans WordPress et utilisez le Divi Builder pour éditer la page sur le front-end (constructeur visuel).
3. Choisissez l'option « Construire à partir de zéro ».

Après cela, vous aurez une toile vierge pour commencer à concevoir dans Divi.

Construire une table réactive avec un défilement horizontal

Partie 1 : Créer les colonnes du tableau

Pour cette conception de table, nous allons créer nos colonnes de table à l'aide de lignes. Pour ce faire, nous utiliserons la propriété flex (CSS personnalisé) pour aligner les lignes horizontalement comme des colonnes.

Mettre à jour les paramètres de la section

Avant d'ajouter une ligne, ouvrez les paramètres de section de la section standard par défaut et ajoutez le CSS personnalisé suivant à l'élément principal :

display:flex;
overflow-y:scroll !important;

Cela forcera le débordement horizontal de la section à avoir une fonctionnalité de défilement et nous donnera la propriété flex nécessaire pour organiser nos lignes horizontalement au lieu de verticalement.

Ajouter une rangée

Maintenant que la section CSS est en place, créez une ligne à une colonne dans la section.

Paramètres de ligne

Ouvrez les paramètres de ligne et mettez à jour les éléments suivants :

• Largeur de gouttière : 1
• Largeur : 100 %

Cela garantira que nos colonnes de tableau n'ont pas de marge supplémentaire entre les modules de texte que nous ajouterons pour nos éléments de tableau.

Ensuite, donnez à la ligne une bordure droite comme suit :

• Largeur de la bordure droite : 1px
• Couleur de la bordure droite : #cccccc

Ensuite, mettez à jour le remplissage :

• Remplissage : 0px en haut, 0px en bas

Sous l'onglet avancé, attribuez à la ligne une classe CSS personnalisée comme suit :

• Classe CSS : et-scroll-table-column

Nous en aurons besoin pour le code personnalisé plus tard.

Création d'éléments de tableau avec des modules de texte

Pour créer les éléments du tableau dans chaque ligne (ou colonne du tableau), nous allons utiliser des modules de texte.

Ajouter un module de texte

Contenu du texte

Ensuite, ajoutez le texte « élément de tableau » au contenu du corps du module de texte.

Mise en forme du texte

Sous l'onglet Conception, mettez à jour les éléments suivants :

• Alignement du texte : au centre
• Hauteur : 80px

• Largeur de la bordure droite : 1px
• Couleur de la bordure inférieure : #cccccc

Cette bordure correspondra à la bordure droite de la ligne.

CSS texte

Pour vous assurer que le texte du module reste centré verticalement et horizontalement, ajoutez le CSS suivant à l'élément principal sous l'onglet avancé :

display:flex;
align-items:center;
justify-content: center;

Module de texte en double pour plus d'éléments de tableau

Maintenant que notre premier élément de tableau a été créé, dupliquez le module de texte (autant de fois que nécessaire) pour créer des éléments de tableau supplémentaires dans la ligne.

Création de l'en-tête de la colonne du tableau

Nous devons transformer le module de texte tout en haut en titre de la colonne du tableau. Pour ce faire, ouvrez les paramètres du module de texte supérieur, mettez à jour l'étiquette dans la vue Calques sur "En-tête" et ajoutez le texte "En-tête" avec le contenu du corps.

Mettez ensuite à jour la couleur d'arrière-plan.

• Arrière-plan : #333333

Et mettez à jour la conception du texte comme suit :

• Poids de la police de texte : gras
• Style de police de texte : TT
• Texte Couleur du texte : #ffffff

Dupliquer la ligne pour plus de colonnes de tableau

Maintenant que la première ligne est terminée, nous pouvons dupliquer la ligne pour créer autant de colonnes de table que nécessaire pour la table. Pour cette conception, nous allons dupliquer la ligne huit fois pour créer un total de neuf lignes.

Partie 2 : Conception de la colonne Sticky Table avec des en-têtes verticaux

La ligne à l'extrême gauche (ou première ligne) servira d'en-têtes verticaux pour notre tableau. Tout d'abord, nous devons mettre à jour l'arrière-plan de la ligne et chacun des modules de texte afin qu'ils aient le même design que les en-têtes en haut de chaque colonne. Ensuite, nous allons rendre toute la ligne collante afin qu'elle reste en place lorsque l'utilisateur fait défiler horizontalement pour afficher les colonnes de tableau masquées.

Mettre à jour l'arrière-plan de la ligne

Pour ce faire, ouvrez les paramètres de la première ligne et mettez à jour la couleur d'arrière-plan :

• Couleur d'arrière-plan : #333333

Mettre à jour les modules de texte

Ensuite, ouvrez les paramètres du module de texte supérieur contenant le titre. Cliquez avec le bouton droit sur le groupe d'options de texte et sélectionnez Étendre les styles de texte. Dans la fenêtre contextuelle Étendre les styles, choisissez d' étendre les styles du texte à tous les textes de cette colonne . Cliquez ensuite sur le bouton Étendre.

Puis multi-sélectionnez tous les modules de texte dans la ligne (maintenez ctrl (ou cmd) et cliquez sur chacun) et mettez à jour le contenu du corps avec le texte "En-tête".

Ajouter un logo

Comme nous n'avons pas besoin de l'en-tête tout en haut de cette colonne, nous allons ajouter un logo au tableau.

Ouvrez les paramètres du module de texte tout en haut de la première ligne.

Supprimez ensuite le corps du texte.

Ajoutez ensuite le logo (assurez-vous qu'il mesure environ 40 pixels sur 40 pixels) en tant qu'image d'arrière-plan. Assurez-vous que la taille de l'image d'arrière-plan est définie sur « Taille réelle ».

Rendre la ligne des titres verticaux collante

Pour rendre la ligne persistante, ajoutez le CSS personnalisé suivant à l'élément principal :

min-width: 150px;
position: -webkit-sticky !important;
position: sticky !important;
left: 0;

(Vous pouvez ignorer toutes les erreurs de code qui s'afficheront en utilisant la propriété sticky.)

Pour vous assurer que la ligne collante reste visible au-dessus des autres lignes, mettez à jour l'index Z :

• Indice Z : 13

Partie 3 : Mise à jour de la section du tableau

Maintenant que les éléments de la table sont tous en place, nous pouvons mettre à jour la section (le conteneur de la table) avec une taille et un débordement spécifiques.

Ouvrez les paramètres de la section et ajoutez une couleur d'arrière-plan :

• Couleur de fond : #ffeaef

Mettez ensuite à jour la taille et l'espacement comme suit :

• Largeur : 100 %
• Largeur maximale : 900 pixels
• Marge : 10vh haut
• Remplissage : 0px en haut, 0px en bas

Ajoutez ensuite la classe CSS suivante :

• Classe CSS : et-scroll-table

Et mettre à jour le débordement :

• Débordement horizontal : défilement
• Débordement vertical : caché

(Remarque : nous avons déjà ajouté « overflow:scroll » à la section en tant que CSS personnalisé afin que la fonctionnalité de défilement soit également en vigueur sur le constructeur visuel.)

Partie 4 : Ajout des boutons de défilement horizontal

Étant donné que la fonctionnalité de défilement horizontal est facilement visible sur le bureau, nous allons ajouter des boutons de défilement horizontal pour une meilleure UX.

Ajouter une section

Pour ce faire, créez une nouvelle section régulière.

Ouvrez les paramètres de la section et supprimez le rembourrage par défaut :

• Remplissage : 0px en haut, 0px en bas

Ajouter une rangée

Donnez à la section une ligne sur une colonne.

Et mettez à jour les paramètres de ligne comme suit :

• Largeur de gouttière : 1
• Largeur : 100 %
• Largeur maximale : 900 pixels
• Remplissage : 10px en haut, 10px en bas, 10px à droite

Créer le bouton de défilement gauche

Pour créer le bouton de défilement gauche, ajoutez un module de présentation à la colonne/ligne.

Retirez le titre et le contenu du corps par défaut et ajoutez une icône de flèche vers la gauche.

Sous l'onglet Conception, mettez à jour les éléments suivants :

• Couleur de l'icône : #333333
• Alignement image/icône : centre
• Utiliser la taille de la police de l'icône : OUI
• Taille de la police de l'icône : 40 px
• Largeur du contenu : 100 %
• Largeur : 50px

Ensuite, donnez au texte de présentation une classe CSS :

• Classe CSS : et-scroll-left

Ceci est nécessaire pour ajouter ultérieurement la fonctionnalité de défilement au clic au texte de présentation/bouton avec notre code.

Créer le bouton de défilement droit

Pour créer le bouton de défilement droit, dupliquez le texte de présentation et mettez à jour l'icône avec une flèche vers la droite.

Ensuite, mettez à jour la classe CSS :

• Classe CSS : et-scroll-right

Pour aligner le bouton horizontalement, ouvrez le paramètre de la colonne et ajoutez le CSS personnalisé suivant :

display:flex;
justify-content:flex-end;

Partie 5 : Ajout du code personnalisé

Pour la dernière partie de ce didacticiel, nous devons ajouter le CSS nécessaire pour définir une largeur minimale pour les lignes (qui sont en fait nos colonnes de tableau) et le code JS nécessaire pour ajouter la fonctionnalité de défilement aux boutons.

Pour ajouter le code, ajoutez un module de code sous le deuxième texte de présentation.

Dans la zone de code, collez le CSS suivant en veillant à envelopper le code dans les balises de style nécessaires.

.et-scroll-left:hover, .et-scroll-right:hover{
cursor:pointer;
}
.et-scroll-table-column {
min-width: 150px;
}

@media all and (max-width: 980px) {
.et-scroll-table::-webkit-scrollbar {
display: none;
}
.et-scroll-table {
-webkit-overflow-scrolling: touch; 
-ms-overflow-style: -ms-autohiding-scrollbar; 
}
}

Sous le code CSS, collez le jQuery suivant en veillant à envelopper le code avec les balises de script nécessaires.

(function($) {
$(document).ready(function(){
var $scrollTable = $(".et-scroll-table");
var $rightButton = $(".et-scroll-right");
var $leftButton = $(".et-scroll-left");
var singleColumnWidth = $(".et-scroll-table-column").width();
var scrollByColumnNumber = (singleColumnWidth + 1) * 2;

$rightButton.click(function () {
$scrollTable.animate({scrollLeft: "+=" + scrollByColumnNumber}, 300);
});
$leftButton.click(function () {
$scrollTable.animate({scrollLeft: "-=" + scrollByColumnNumber}, 300);
});
});
})( jQuery );

Mise à jour de la largeur de colonne

Si vous souhaitez mettre à jour la largeur minimale de chacune des colonnes du tableau, vous pouvez modifier la valeur de la largeur minimale dans le CSS.

Mise à jour du nombre de colonnes sur le défilement

Actuellement, cliquer sur les boutons fera défiler horizontalement (gauche ou droite) une distance égale à deux largeurs de colonnes. Pour modifier le nombre de colonnes lors du défilement, mettez à jour le nombre le plus à droite (actuellement le nombre 2) dans la valeur de la variable scrollByColumnNumber .

Ajout de couleurs de colonne en alternance

À l'heure actuelle, la couleur d'arrière-plan de la section détermine la couleur de toutes les colonnes (ou lignes) du tableau. Si vous souhaitez créer des couleurs alternées pour ces colonnes, utilisez la sélection multiple pour sélectionner une ligne sur deux et ajoutez une couleur d'arrière-plan blanche à chacune d'elles.

Résultat final

Découvrez maintenant le résultat final !

Voici la conception finale de la table sur le bureau.

Et voici la fonctionnalité de défilement horizontal sur ordinateur de bureau et mobile.

Dernières pensées

Peu importe jusqu'où nous arrivons dans le monde de la conception de sites Web, les tables semblent toujours avoir leur place. Ils continuent de fournir une solution précieuse pour organiser le contenu d'une manière que les utilisateurs comprennent. Ce tableau avec défilement horizontal devrait être utile pour un large éventail de cas d'utilisation. Et, peut-être la meilleure partie, vous pouvez mettre à jour le contenu du tableau (via l'éditeur en ligne intégré de Divi) et styliser le tableau de nombreuses manières créatives à l'aide du générateur visuel.

Pour plus d'informations sur la création de tables réactives dans WordPress, consultez notre article sur Comment créer des tables réactives dans WordPress.

J'ai hâte de vous entendre dans les commentaires.

À votre santé!