[CSS] Rendre un tableau responsive

#INTEGRATION #CSS #HTML #MEDIAQUERIES

Quand nous publions un tableau en ligne, notre hantise est que ce dernier ne soit pas lisible sur mobile. Quand on sait que la lecture sur internet se fait bien plus sur smartphone que sur l’ordinateur, il est inévitable de rendre l’ensemble de nos contenus responsives.

Pour cela, nous pouvons entourer notre tableau de l’élément overflow-x: auto. Cela créera un scroll horizontal. Pourquoi pas ? Mais la lecture sur mobile n’est en rien facilitée.

Autre méthode : nous pouvons transformer notre tableau changeant l’orientation des colonnes. Verticales, elles passent à l’horizontale à partir d’une certaine résolution.

Voici notre tableau sur desktop :

Voici le même tableau, sur mobile, après transformation des colonnes :

Pour cela, voici le code HTML :

<table class=”events-table” >
<thead>
<tr>
<th class=”event-date”>Date</th>
<th class=”event-time”>Horaire</th>
<th class=”event-description”>Evènement</th>
</tr>
</thead>

<tbody>
<tr>
<td data-label=”Date”> Le #_EVENTDATES</td>
<td data-label=”Horaire”>#_EVENTTIMES</td>
<td data-label=”Evènement”>#_EVENTLINK</td>
</tr>
</tbody>
</table>

Je pense à ajouter un “data-label” à chacun de mes “td”.

Et voici le CSS :

@media (max-width: 700px){
.table thead {
display: none;
}

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

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

.table td:before {
content: attr(data-label);
float: left;
font-weight: bold;
}
}

Et nous voilà avec un tableau responsive, lisible sur mobile.