9.1 Défilement (Scroll)
Les tableaux sont souvent utilisés pour afficher des données structurées, mais ils peuvent être difficiles à afficher sur des dispositifs à petits écrans. Les tableaux adaptatifs permettent d'améliorer la perception et l'interaction avec les données sur divers appareils, y compris les téléphones portables et les tablettes. Voyons quelques techniques pour créer des tableaux réactifs.
Une des méthodes simples pour créer des tableaux adaptatifs est d'ajouter un défilement horizontal. Cette méthode conserve la structure du tableau et permet aux utilisateurs de faire défiler les données horizontalement sur des écrans étroits.
Exemple :
.table-container {
overflow-x: auto;
width: 100%;
}
table {
width: 100%;
border-collapse: collapse;
}
th, td {
border: 1px solid #ccc;
padding: 8px;
text-align: left;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tableau adaptatif avec défilement</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="table-container">
<table>
<thead>
<tr>
<th>Colonne 1</th>
<th>Colonne 2</th>
<th>Colonne 3</th>
<th>Colonne 4</th>
</tr>
</thead>
<tbody>
<tr>
<td>Données 1</td>
<td>Données 2</td>
<td>Données 3</td>
<td>Données 4</td>
</tr>
<!-- Autres lignes -->
</tbody>
</table>
</div>
</body>
</html>
Explication du code :
.table-container: ajoute un défilement horizontal si le tableau dépasse la largeur du conteneurtable: définit la largeur du tableau à 100% et fusionne les bordures des cellules
9.2 Masquage des colonnes (Column Hiding)
Cette méthode consiste à masquer des colonnes moins importantes sur des écrans étroits afin que les données principales restent visibles. Cela peut être fait à l'aide de media queries.
Exemple :
@media (max-width: 600px) {
.hide {
display: none;
}
}
table {
width: 100%;
border-collapse: collapse;
}
th, td {
border: 1px solid #ccc;
padding: 8px;
text-align: left;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tableau adaptatif avec masquage des colonnes</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<table>
<thead>
<tr>
<th>Colonne 1</th>
<th>Colonne 2</th>
<th class="hide">Colonne 3</th>
<th class="hide">Colonne 4</th>
</tr>
</thead>
<tbody>
<tr>
<td>Données 1</td>
<td>Données 2</td>
<td class="hide">Données 3</td>
<td class="hide">Données 4</td>
</tr>
<!-- Autres lignes -->
</tbody>
</table>
</body>
</html>
Explication du code :
.hide: masque certaines colonnes sur des écrans de moins de 600px grâce aux media queriestable: définit la largeur du tableau à 100% et fusionne les bordures des cellules
9.3. Empilement en blocs (Stacking)
L'empilement en blocs transforme les lignes du tableau en blocs qui s'affichent les uns sous les autres sur des écrans étroits. Cela rend le tableau plus lisible sur les appareils mobiles.
Exemple :
table {
width: 100%;
border-collapse: collapse;
}
th, td {
border: 1px solid #ccc;
padding: 8px;
text-align: left;
}
@media (max-width: 600px) {
table, thead, tbody, th, td, tr {
display: block;
}
th {
display: none;
}
td {
display: flex;
justify-content: space-between;
padding: 10px;
border-bottom: 1px solid #ccc;
}
td::before {
content: attr(data-label);
font-weight: bold;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tableau adaptatif avec empilement en blocs</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<table>
<thead>
<tr>
<th>Colonne 1</th>
<th>Colonne 2</th>
<th>Colonne 3</th>
<th>Colonne 4</th>
</tr>
</thead>
<tbody>
<tr>
<td data-label="Colonne 1">Données 1</td>
<td data-label="Colonne 2">Données 2</td>
<td data-label="Colonne 3">Données 3</td>
<td data-label="Colonne 4">Données 4</td>
</tr>
<!-- Autres lignes -->
</tbody>
</table>
</body>
</html>
Explication du code :
- Media queries : transforment le tableau en éléments de bloc sur des écrans de moins de 600px
td::before: ajoute un pseudo-élément avec le nom de la colonne avant chaque valeur de cellule pour conserver le contexte des données
9.4. Transformation en cartes (Card Layout)
Cette méthode consiste à transformer chaque ligne de tableau en une carte séparée sur des écrans étroits. Cela aide à améliorer la lisibilité des données sur les appareils mobiles.
Exemple :
table {
width: 100%;
border-collapse: collapse;
}
th, td {
border: 1px solid #ccc;
padding: 8px;
text-align: left;
}
@media (max-width: 600px) {
table, thead, tbody, th, td, tr {
display: block;
}
th {
display: none;
}
tr {
margin-bottom: 10px;
border-bottom: 2px solid #ccc;
padding-bottom: 10px;
}
td {
display: flex;
justify-content: space-between;
padding: 10px 0;
border: none;
}
td::before {
content: attr(data-label);
font-weight: bold;
margin-right: 10px;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tableau adaptatif en cartes</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<table>
<thead>
<tr>
<th>Colonne 1</th>
<th>Colonne 2</th>
<th>Colonne 3</th>
<th>Colonne 4</th>
</tr>
</thead>
<tbody>
<tr>
<td data-label="Colonne 1">Données 1</td>
<td data-label="Colonne 2">Données 2</td>
<td data-label="Colonne 3">Données 3</td>
<td data-label="Colonne 4">Données 4</td>
</tr>
<!-- Autres lignes -->
</tbody>
</table>
</body>
</html>
Explication du code :
- Media queries : transforment le tableau en éléments de bloc et créent des cartes sur les écrans de moins de 600px
td::before: ajoute un pseudo-élément avec le nom de la colonne avant chaque valeur de cellule pour conserver le contexte des données
9.5 Utilisation de CSS Frameworks
De nombreux frameworks CSS, comme Bootstrap, offrent des solutions intégrées pour créer des tableaux adaptatifs. Utiliser de tels frameworks simplifie le processus et fournit des styles et des composants prêts à l'emploi.
Exemple avec Bootstrap :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tableau adaptatif avec Bootstrap</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<table class="table table-responsive">
<thead>
<tr>
<th>Colonne 1</th>
<th>Colonne 2</th>
<th>Colonne 3</th>
<th>Colonne 4</th>
</tr>
</thead>
<tbody>
<tr>
<td>Données 1</td>
<td>Données 2</td>
<td>Données 3</td>
<td>Données 4</td>
</tr>
<!-- Autres lignes -->
</tbody>
</table>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.2/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>
Explication du code :
table.table-responsive: classe Bootstrap qui ajoute un défilement horizontal pour les tableaux sur les écrans étroitscontainer: classe Bootstrap pour centrer et définir une largeur maximale pour le conteneur
GO TO FULL VERSION