Rendre un tableau responsive, la recette magique !

Les tableaux HTML sont un moyen courant de présenter des données sur les pages web. Cependant, l’utilisation de tableaux pose des défis en termes de responsif et d’adaptation à différents appareils et tailles d’écran. En effet, les tableaux ont tendance à dépasser la largeur disponible sur des écrans plus étroits, ce qui peut entraîner une expérience utilisateur médiocre.

Rien de plus frustrant que de n’avoir accès qu’à la moitié de l’information…

Le tableau responsive : l’ajout d’un scroll

Une astuce utilisée consiste à quelques lignes CSS

table{overflow-x: auto}

Ceci rajoute une scrollbar en dessous de notre tableau.

Cependant, il existe une excellence astuce de Vanessa Asse, rédactrice web et développeuse. C’est la technique que j’utilise, notamment dans mon article qui vous explique les rôles utilisateurs de WordPress.

Voici la recette d’un tableau responsive réussi !

Le tableau responsive : Mettre votre tableau à la verticale

Ingrédient n°1 : Créer un tableau en html ou utiliser celui de WordPress

<table>
<thead>
<tr>
<th>Titre 1</th>
<th>Titre 2</th>
<th>Titre 3</th>
</tr>
</thead>

<tbody>
<tr>
<td data-label="Titre 1">Texte ligne 1 Colonne 1</td>
<td data-label="Titre 2">Texte ligne 1 Texte Colonne 2</td>
<td data-label="Titre 3">Texte ligne 1 Texte Colonne 3</td>
</tr>
<tr>
<td data-label="Titre 1">Texte ligne 2 Colonne 1</td>
<td data-label="Titre 2">Texte ligne 2 Texte Colonne 2</td>
<td data-label="Titre 3">Texte ligne 2 Texte Colonne 3</td>
</tr>
</tbody>
</table>

Ingrédient n°2 : un peu de CSS :

Si vous êtes sur WordPress, il vous suffira d’ajouter ces quelques ligne dans votre thème enfant

/* On instancie sur pc */
table thead th{background:rgb(3, 47, 104); color:white; border:1px solid #013765;}
table tbody td,
table tbody tr{ border:1px solid blue}
table tbody tr:nth-child(even){background: rgb(199, 199, 199)}

/* résultat mobile*/
@media (max-width: 700px){
table thead {
display: none;
}

table tr{
display: block;
margin-bottom: 20px;
}

table td {
display: block;
text-align: right;
}

table td:before {
content: attr(data-label);
float: left;
font-weight: 500;
color: #E9015E;
}
}

Quelques explications :

• On détermine une largeur maximum de 700 pixels pour cette mise en page. Au-delà, le tableau reprendra sa forme.
• On cache l’en-tête de notre tableau (thead)
• On place le texte de notre titre de colonne dans la valeur « data-label » correspondant à la cellule
• On affiche notre ligne de tableau comme un “block” et non plus comme une ligne. Il prend donc de la verticalité
• On en fait de même avec chaque cellule
• La subtilité consiste à récupérer la valeur de notre en-tête comme valeur affichée avant la valeur de la colonne grâce au td:before

C’est prêt !

Sur Desktop :

Sur Mobile :

Le petit plus : l’automatisation avec un peu de JQuery

Ce code marche très bien, cependant, ajouter à la main chaque « data-label » peut s’avérer fastidieux.

Pour résoudre cela, on va venir compléter avec une petite fonction en JQuery qui va nous permettre d’automatiser

Le script JQuery

jQuery(document).ready(function($) {
$('table th').each(function(index) {
    var labelText = $(this).text();
    $('table td:nth-child(' + (index + 1) + ')').attr('data-label', labelText);
  });
});

Comment fonctionne ce code ?

• On va récupérer le texte de chaque th (titre du tableau)
• On le stocke dans une variable labelText
• Pour chaque td, on applique l’attribut « data-label » et on lui injecte le texte correspondant à son titre de colonne.

Ajouter votre script dans WordPress

Pour ajouter ce script JQuery dans WordPress, placez ce code dans un fichier script.js dans votre thème enfant, puis ouvrez le fichier function.php du thème enfant

Ajoutez ces lignes :

function iumedia_scripts() {
    wp_enqueue_script('jquery'); // normalement jquery est déjà intégré, mais si vous rencontrez "JQuery is not defined" dans la console insérez cette ligne
    wp_enqueue_script('script-js', get_template_directory_uri() . '/*nom-de-votre-dossier*/script.js', array( 'jquery' ), false, true );
  
}
add_action('wp_enqueue_scripts', 'iumedia_scripts');

N’oubliez pas de remplacer le nom de votre dossier dans le code