5 exemples de tableau responsive CSS moderne + Code complet

Vous cherchez à créer un tableau responsive en CSS simple, moderne et lisible sur mobile ? Dans ce tutoriel, vous allez apprendre à transformer un tableau HTML classique en tableau adaptatif, sans JavaScript, uniquement avec du CSS.

• Rendre un tableau lisible sur mobile sans tout refaire
• Découvrir plusieurs approches pour adapter facilement vos tableaux à tous les écrans
• Disposer d’une base réutilisable pour créer des tableaux modernes et efficaces

Vous avez déjà créé un tableau HTML… et tout semblait parfait. Jusqu’au moment où vous avez ouvert votre page sur mobile. Et là, catastrophe : tout déborde, le texte devient illisible, et votre tableau se transforme en puzzle. Pas besoin de tout refaire. Avec un peu de CSS bien pensé, vous pouvez transformer n’importe quel tableau en tableau responsive, lisible sur tous les écrans. Et ce n’est pas si compliqué.

Dans ce tutoriel front-end, je vais vous accompagner pas à pas pour comprendre comment rendre un tableau responsive en CSS, à partir d’une base simple que vous pourrez réutiliser dans tous vos projets.

Pourquoi un tableau responsive est indispensable

Aujourd’hui, plus de la moitié du trafic web se fait sur mobile. Et un tableau HTML classique… n’est clairement pas fait pour ça.

Un tableau “classique” :

• déborde de l’écran
• oblige à scroller horizontalement
• devient difficile à lire

Un tableau responsive CSS, lui :

• s’adapte à la taille de l’écran
• reste lisible sur mobile
• améliore l’expérience utilisateur

Et un utilisateur frustré… c’est souvent un utilisateur qui quitte votre site.

La base HTML du tableau : votre fondation solide

Avant de parler CSS, il faut une base propre :

<!--
  Changez simplement la classe ci-dessous pour tester les différents styles :
  tableau-responsive-1
  tableau-responsive-2
  tableau-responsive-3
  tableau-responsive-4
  tableau-responsive-5
-->

<div class="tableau-wrapper-1">
 <table class="tableau-responsive-1">
  <caption>Liste des formations web</caption>

  <thead>
    <tr>
      <th>Formation</th>
      <th>Niveau</th>
      <th>Durée</th>
      <th>Prix</th>
      <th>Statut</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td data-label="Formation">HTML & CSS</td>
      <td data-label="Niveau">Débutant</td>
      <td data-label="Durée">4 semaines</td>
      <td data-label="Prix">Gratuit</td>
      <td data-label="Statut">Disponible</td>
    </tr>

    <tr>
      <td data-label="Formation">JavaScript</td>
      <td data-label="Niveau">Intermédiaire</td>
      <td data-label="Durée">6 semaines</td>
      <td data-label="Prix">Gratuit</td>
      <td data-label="Statut">Disponible</td>
    </tr>

    <tr>
      <td data-label="Formation">PHP & MySQL</td>
      <td data-label="Niveau">Intermédiaire</td>
      <td data-label="Durée">8 semaines</td>
      <td data-label="Prix">Gratuit</td>
      <td data-label="Statut">Bientôt</td>
    </tr>

    <tr>
      <td data-label="Formation">WordPress</td>
      <td data-label="Niveau">Débutant</td>
      <td data-label="Durée">5 semaines</td>
      <td data-label="Prix">Gratuit</td>
      <td data-label="Statut">Disponible</td>
    </tr>
  </tbody>
 </table>
</div>

• Ce code HTML nous servira pour nos 5 exemples de tableau responsive.

Voici les éléments importants de votre structure HTML :

Une structure classique et propre

Votre tableau utilise les balises essentielles :

• <table> : le tableau
• <thead> : l’en-tête
• <tbody> : le contenu
• <tr> : les lignes
• <th> et <td> : les cellules

Rien de surprenant ici. Mais c’est justement ça qui est bien : plus votre HTML est propre, plus votre CSS sera simple.

👉 Pour ceux qui débutent : Liste et tableau en HTML

Le rôle crucial de data-label

C’est un détail qui n’en est pas un. Dans votre code, vous avez ceci :

<td data-label="Formation">HTML & CSS</td>

Et ça, c’est une pépite.

Parce que sur mobile, on va souvent transformer le tableau en “cartes”. Et dans ce cas, les en-têtes disparaissent. Le data-label permet de les réafficher intelligemment.

En clair, vous préparez déjà votre tableau pour le responsive.

Comprendre le problème avant de le résoudre

Avant de plonger dans le CSS, il faut comprendre pourquoi un tableau pose problème.

Un tableau HTML est rigide par nature :

• il aligne les colonnes
• il impose une largeur minimale
• il ne “casse” pas facilement

Résultat, sur un petit écran, il déborde.

Il existe plusieurs façons de contourner ce problème. Et c’est justement ce que vous allez découvrir avec nos 5 designs d’exemple de tableau responsive.

Les stratégies pour rendre un tableau responsive

Sans entrer encore dans les détails techniques, voici les approches les plus utilisées en CSS.

1. Le scroll horizontal

C’est la solution la plus simple :

• on garde le tableau tel quel
• on ajoute un scroll horizontal

• C’est rapide à mettre en place mais pas toujours agréable à utiliser.

2. La transformation en blocs

Ici, on change complètement l’affichage :

• chaque ligne devient une “carte”
• les cellules s’empilent verticalement

• C’est ultra lisible sur mobile mais plus complexe à mettre en place.

3. Le masquage de colonnes

On cache certaines colonnes sur mobile.

Cela vous donne un tableau plus léger mais avec un gros inconvénient : la perte d’informations.

4. Le design hybride

Un mélange de plusieurs techniques :

• scroll + adaptation
• colonnes dynamiques
• styles conditionnels

• C’est souvent le meilleur compromis.

Mise en place : préparer votre CSS

Voici une base commune pour nos 5 exemples de design de tableau responsive CSS :

body {
  font-family: Arial, sans-serif;
  margin: 20px;
}

.tableau-wrapper {
  width: 100%;
  overflow-x: auto;
}

table {
  border-collapse: collapse;
  width: 100%;
}

th, td {
  padding: 10px;
  text-align: left;
}

caption {
  font-weight: bold;
  margin-bottom: 10px;
}

Ces règles de bases sont très importantes :

• overflow-x: auto : permet le scroll si nécessaire
• border-collapse : évite les doubles bordures
• width: 100% : adapte le tableau à son conteneur

Rien de magique… mais tout est essentiel.

Des formations informatique pour tous !

Débutant ou curieux ? Apprenez le développement web, le référencement, le webmarketing, la bureautique, à maîtriser vos appareils Apple et bien plus encore…

Formateur indépendant, professionnel du web depuis 2006, je vous accompagne pas à pas et en cours particulier, que vous soyez débutant ou que vous souhaitiez progresser. En visio, à votre rythme, et toujours avec pédagogie.

Découvrez mes formations Qui suis-je ?

Le responsive commence avec les media queries

Le cœur du responsive, c’est ça : L’utilisation de media query CSS.

@media screen and (max-width: 768px) {
  /* styles mobile */
}

Concrètement, cela signifie :

“Si l’écran fait moins de 768px, alors applique ces styles”

C’est ici que tout va se jouer pour vos tableaux responsive CSS.

Exemple 1 : Un tableau responsive CSS avec scroll horizontal

Le code CSS :

body {
  font-family: Arial, sans-serif;
  margin: 20px;
  background: #f6f7f9;
  color: #1f2937;
}

.tableau-wrapper {
  width: 100%;
  overflow-x: auto;
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
}

.tableau-wrapper::-webkit-scrollbar {
  height: 8px;
}

.tableau-wrapper::-webkit-scrollbar-track {
  background: #eef0f3;
  border-radius: 999px;
}

.tableau-wrapper::-webkit-scrollbar-thumb {
  background: #c7ccd3;
  border-radius: 999px;
}

.tableau-responsive-1 {
  width: 100%;
  min-width: 700px;
  border-collapse: collapse;
  overflow: hidden;
}

.tableau-responsive-1 caption {
  padding: 18px 20px;
  font-size: 1.1rem;
  font-weight: 700;
  text-align: left;
  color: #111827;
}

.tableau-responsive-1 thead {
  background: #f3f4f6;
}

.tableau-responsive-1 th,
.tableau-responsive-1 td {
  padding: 16px 20px;
  text-align: left;
  white-space: nowrap;
  border-bottom: 1px solid #e5e7eb;
}

.tableau-responsive-1 th {
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #6b7280;
}

.tableau-responsive-1 td {
  font-size: 0.95rem;
  color: #374151;
}

.tableau-responsive-1 tbody tr {
  transition: background-color 0.2s ease;
}

.tableau-responsive-1 tbody tr:hover {
  background: #f9fafb;
}

.tableau-responsive-1 tbody tr:last-child td {
  border-bottom: none;
}

.tableau-responsive-1 td:last-child {
  font-weight: 700;
  color: #2563eb;
}

Résultat :

Exemple 2 : Un tableau responsive en cartes

Le code CSS :

body {
  font-family: Arial, sans-serif;
  margin: 20px;
  background: #f6f7f9;
  color: #1f2937;
}

.tableau-responsive-2 {
  width: 100%;
  border-collapse: collapse;
  background: #ffffff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

.tableau-responsive-2 caption {
  padding: 20px;
  font-weight: 700;
  font-size: 1.1rem;
  text-align: left;
}

.tableau-responsive-2 th,
.tableau-responsive-2 td {
  padding: 16px 20px;
  text-align: left;
  border-bottom: 1px solid #e5e7eb;
}

.tableau-responsive-2 th {
  background: #f3f4f6;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #6b7280;
}

.tableau-responsive-2 tbody tr:hover {
  background: #f9fafb;
}

/* ===== VERSION MOBILE EN CARTES ===== */
@media (max-width: 768px) {
  .tableau-responsive-2 thead {
    display: none;
  }

  .tableau-responsive-2,
  .tableau-responsive-2 tbody,
  .tableau-responsive-2 tr,
  .tableau-responsive-2 td {
    display: block;
    width: 100%;
  }

  .tableau-responsive-2 tr {
    margin-bottom: 20px;
    background: #ffffff;
    border-radius: 14px;
    padding: 10px 0;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);
  }

  .tableau-responsive-2 td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    border: none;
    border-bottom: 1px solid #f1f1f1;
    font-size: 0.95rem;
  }

  .tableau-responsive-2 td:last-child {
    border-bottom: none;
    font-weight: 700;
    color: #2563eb;
  }

  .tableau-responsive-2 td::before {
    content: attr(data-label);
    font-weight: 600;
    color: #6b7280;
    margin-right: 10px;
  }
}

Le résultat :

Exemple 3 : Un tableau minimaliste

Le code CSS :

body {
  font-family: Arial, sans-serif;
  margin: 20px;
  background: #f8fafc;
  color: #1f2937;
}

/* TABLEAU MODERNE */
.tableau-responsive-3 {
  width: 100%;
  border-collapse: collapse;
  background: #ffffff;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.04);
}

.tableau-responsive-3 caption {
  padding: 18px 20px;
  font-size: 1.05rem;
  font-weight: 600;
  text-align: left;
}

/* EN-TÊTE */
.tableau-responsive-3 thead {
  background: #f1f5f9;
}

.tableau-responsive-3 th {
  font-size: 0.8rem;
  text-transform: uppercase;
  color: #64748b;
  letter-spacing: 0.05em;
  padding: 14px 18px;
}

/* CELLULES */
.tableau-responsive-3 td {
  padding: 14px 18px;
  border-bottom: 1px solid #eef2f7;
  font-size: 0.95rem;
}

.tableau-responsive-3 tbody tr {
  transition: background 0.2s ease;
}

.tableau-responsive-3 tbody tr:hover {
  background: #f9fafb;
}

/* DERNIÈRE COLONNE MISE EN AVANT */
.tableau-responsive-3 td:last-child {
  font-weight: 600;
  color: #2563eb;
}

/* ===== RESPONSIVE : MASQUER CERTAINES COLONNES ===== */
@media (max-width: 900px) {
  /* cacher "Durée" */
  .tableau-responsive-3 th:nth-child(3),
  .tableau-responsive-3 td:nth-child(3) {
    display: none;
  }
}

@media (max-width: 600px) {
  /* cacher "Prix" */
  .tableau-responsive-3 th:nth-child(4),
  .tableau-responsive-3 td:nth-child(4) {
    display: none;
  }

  /* resserrer le design */
  .tableau-responsive-3 th,
  .tableau-responsive-3 td {
    padding: 10px 12px;
    font-size: 0.9rem;
  }
}

Ce qui donnera :

Exemple 4 : Un tableau moderne

Le code CSS :

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap');

:root {
    --primary: #6366f1;
    --primary-light: #eef2ff;
    --success: #22c55e;
    --success-bg: #f0fdf4;
    --warning: #f59e0b;
    --warning-bg: #fffbeb;
    --text-main: #1e293b;
    --text-light: #64748b;
    --bg-body: #f8fafc;
}

/* Conteneur principal */
.tableau-wrapper-12 {
    font-family: 'Plus Jakarta Sans', sans-serif;
    padding: 40px 20px;
    background: var(--bg-body);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Légende du tableau */
.tableau-responsive-4 caption {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-main);
    margin-bottom: 2rem;
    text-align: left;
    letter-spacing: -0.02em;
}

/* Structure du tableau */
.tableau-responsive-4 {
    width: 100%;
    max-width: 1100px;
    border-collapse: separate;
    border-spacing: 0 12px; /* Espace entre les lignes pour effet "floating" */
    background: transparent;
}

/* En-tête */
.tableau-responsive-4 thead th {
    background: transparent;
    color: var(--text-light);
    font-weight: 600;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 10px 24px;
    border: none;
}

/* Lignes du corps */
.tableau-responsive-4 tbody tr {
    background-color: #ffffff;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
}

.tableau-responsive-4 tbody tr:hover {
    transform: translateY(-4px) scale(1.005);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* Cellules */
.tableau-responsive-4 td {
    padding: 20px 24px;
    font-size: 0.95rem;
    color: var(--text-main);
    border-top: 1px solid #f1f5f9;
    border-bottom: 1px solid #f1f5f9;
}

/* Arrondis des coins pour chaque ligne */
.tableau-responsive-4 td:first-child {
    border-left: 1px solid #f1f5f9;
    border-top-left-radius: 16px;
    border-bottom-left-radius: 16px;
    font-weight: 600;
    color: var(--primary);
}

.tableau-responsive-4 td:last-child {
    border-right: 1px solid #f1f5f9;
    border-top-right-radius: 16px;
    border-bottom-right-radius: 16px;
}

/* Style spécifique pour le Statut (Badges) */
.tableau-responsive-4 td[data-label="Statut"] {
    text-align: center;
}

/* On simule un badge pour le statut */
.tableau-responsive-4 td[data-label="Statut"]::after {
    content: ""; /* On utilise le texte existant mais on le stylise */
}

/* Logique de couleurs pour les statuts */
.tableau-responsive-4 td[data-label="Statut"] {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
}

/* Amélioration visuelle des colonnes prix et durée */
.tableau-responsive-4 td[data-label="Prix"] {
    color: var(--success);
    font-weight: 700;
}

/* --- RESPONSIVE --- */
@media screen and (max-width: 850px) {
    .tableau-responsive-4 {
        border-spacing: 0 20px;
    }
    
    .tableau-responsive-4 thead {
        display: none;
    }

    .tableau-responsive-4 tr {
        display: block;
        border-radius: 20px !important;
        padding: 15px;
    }

    .tableau-responsive-4 td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        border: none !important;
        padding: 12px 15px;
        text-align: right;
    }

    .tableau-responsive-4 td::before {
        content: attr(data-label);
        font-weight: 700;
        color: var(--text-light);
        text-transform: uppercase;
        font-size: 0.75rem;
    }

    .tableau-responsive-4 td:first-child {
        border-bottom: 2px solid var(--primary-light) !important;
        margin-bottom: 10px;
        font-size: 1.1rem;
    }
}

Ce qui affichera :

Exemple 5 : Un tableau hybride intelligent

Le code CSS :

body {
  margin: 0;
  padding: 40px 20px;
  font-family: Arial, Helvetica, sans-serif;
  background: #f4f6f8;
  color: #1f2937;
}

.tableau-wrapper {
  width: min(1100px, 100%);
  margin: 0 auto;
  overflow-x: auto;
  border-radius: 18px;
  background: #ffffff;
  box-shadow: 0 20px 50px rgba(15, 23, 42, 0.08);
}

.tableau-responsive-5 {
  width: 100%;
  min-width: 760px;
  border-collapse: collapse;
  overflow: hidden;
}

.tableau-responsive-5 caption {
  padding: 22px;
  font-size: 1.2rem;
  font-weight: 700;
  text-align: left;
  color: #111827;
  background: #ffffff;
}

.tableau-responsive-5 thead {
  background: #111827;
  color: #ffffff;
}

.tableau-responsive-5 th {
  padding: 18px 20px;
  font-size: 0.85rem;
  text-align: left;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

.tableau-responsive-5 td {
  padding: 18px 20px;
  font-size: 0.95rem;
  border-top: 1px solid #e5e7eb;
  white-space: nowrap;
}

.tableau-responsive-5 tbody tr {
  transition: background 0.25s ease, transform 0.25s ease;
}

.tableau-responsive-5 tbody tr:hover {
  background: #f9fafb;
}

.tableau-responsive-5 td:first-child {
  font-weight: 700;
  color: #111827;
}

.tableau-responsive-5 td:last-child {
  font-weight: 700;
}

.tableau-responsive-5 td[data-label="Statut"] {
  color: #047857;
}

.tableau-wrapper::-webkit-scrollbar {
  height: 10px;
}

.tableau-wrapper::-webkit-scrollbar-track {
  background: #e5e7eb;
  border-radius: 999px;
}

.tableau-wrapper::-webkit-scrollbar-thumb {
  background: #9ca3af;
  border-radius: 999px;
}

.tableau-wrapper::-webkit-scrollbar-thumb:hover {
  background: #6b7280;
}

/* Tablette : tableau conservé, mais colonnes secondaires allégées */
@media screen and (max-width: 900px) {
  .tableau-wrapper {
    border-radius: 16px;
  }

  .tableau-responsive-5 {
    min-width: 620px;
  }

  .tableau-responsive-5 th,
  .tableau-responsive-5 td {
    padding: 16px;
  }

  .tableau-responsive-5 th:nth-child(3),
  .tableau-responsive-5 td:nth-child(3) {
    display: none;
  }
}

/* Mobile : mode hybride intelligent */
@media screen and (max-width: 640px) {
  body {
    padding: 24px 14px;
  }

  .tableau-wrapper {
    overflow-x: visible;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
  }

  .tableau-responsive-5 {
    min-width: 0;
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 14px;
  }

  .tableau-responsive-5 caption {
    padding: 0 0 14px;
    background: transparent;
    font-size: 1.1rem;
  }

  .tableau-responsive-5 thead {
    display: none;
  }

  .tableau-responsive-5 tbody,
  .tableau-responsive-5 tr,
  .tableau-responsive-5 td {
    display: block;
    width: 100%;
  }

  .tableau-responsive-5 tr {
    box-sizing: border-box;
    padding: 18px;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 14px 35px rgba(15, 23, 42, 0.08);
    border: 1px solid #eef2f7;
  }

  .tableau-responsive-5 td {
    box-sizing: border-box;
    padding: 10px 0;
    border: none;
    white-space: normal;
  }

  .tableau-responsive-5 td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 4px;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #6b7280;
  }

  .tableau-responsive-5 td:first-child {
    padding-top: 0;
    padding-bottom: 14px;
    margin-bottom: 8px;
    border-bottom: 1px solid #e5e7eb;
    font-size: 1.15rem;
  }

  .tableau-responsive-5 td:first-child::before {
    display: none;
  }

  .tableau-responsive-5 td:nth-child(2),
  .tableau-responsive-5 td:nth-child(4),
  .tableau-responsive-5 td:nth-child(5) {
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: 12px;
    align-items: center;
  }

  .tableau-responsive-5 td:nth-child(2)::before,
  .tableau-responsive-5 td:nth-child(4)::before,
  .tableau-responsive-5 td:nth-child(5)::before {
    margin-bottom: 0;
  }

  .tableau-responsive-5 td:nth-child(3) {
    display: none;
  }

  .tableau-responsive-5 td[data-label="Statut"] {
    margin-top: 8px;
  }

  .tableau-responsive-5 td[data-label="Statut"]::after {
    content: "";
    display: inline-block;
    width: 9px;
    height: 9px;
    margin-left: 8px;
    border-radius: 50%;
    background: currentColor;
  }
}

/* Très petit écran : version encore plus compacte */
@media screen and (max-width: 420px) {
  .tableau-responsive-5 tr {
    padding: 16px;
  }

  .tableau-responsive-5 td:nth-child(2),
  .tableau-responsive-5 td:nth-child(4),
  .tableau-responsive-5 td:nth-child(5) {
    grid-template-columns: 1fr;
    gap: 4px;
  }
}

Ce qui donnera comme résultat :

Quelques erreurs classiques à éviter

Autant vous prévenir maintenant, ça vous évitera quelques migraines.

1. Oublier le meta viewport

Sans ça, votre responsive ne fonctionne pas correctement :

<meta name="viewport" content="width=device-width, initial-scale=1.0">

👉 Tout savoir sur : Viewport et balise meta-viewport

2. Forcer des largeurs fixes

Un tableau avec width: 800px sur mobile… c’est non.

3. Négliger la lisibilité

Un tableau responsive, ce n’est pas juste “qui s’adapte”.

• C’est aussi “qui se lit facilement”.

4. Trop en faire

Animations, couleurs, effets… Oui, c’est tentant. Mais parfois, la simplicité gagne.

---

Vous avez maintenant :

• une base HTML propre
• une compréhension du responsive
• différentes techniques CSS

Vous allez pouvoir créer pour votre site web :

• un tableau avec scroll horizontal
• un tableau en cartes
• un tableau minimaliste
• un tableau stylé moderne
• un tableau hybride intelligent

Et tout ça… avec la même base HTML.

---

Vous venez de poser les fondations d’un élément essentiel du web moderne : le tableau responsive en CSS. Et mine de rien, ce que vous avez appris ici va bien au-delà des tableaux. Vous avez compris comment adapter un contenu à son contexte. Et ça, c’est une compétence clé en développement web.

Maintenant, à vous de jouer. Testez, cassez, recommencez. Essayez vos 5 designs, comparez-les, améliorez-les. C’est en manipulant que tout devient clair.

Et qui sait ? Le prochain tableau que vous créerez sera peut-être celui qui fera dire à un utilisateur : “Enfin un site agréable à lire sur mobile.”

Et ça… ça vaut largement quelques lignes de CSS en plus.