📋 Rendre un tableau responsive en CSS

Les tableaux sont pratiques sur desktop, mais illisibles sur mobile. Voici deux méthodes pour les rendre lisibles sur petit écran sans JavaScript.

🔹 Toutes les colonnes sont-elles utiles ?

  @media only screen and (max-width: 640px) {
	table tr td:nth-child(4),  /* Masque la colonne "Change" */
	table tr th:nth-child(4),
	table tr td:nth-child(7),      /* Masque la colonne "High" */
	table tr th:nth-child(7),
	table tr td:nth-child(8),  /* Masque la colonne "Low" */
	table tr th:nth-child(8)
	{
	display: none;
	}

🔹 Méthode 1 : Scroll horizontal

On garde le tableau tel quel, mais on permet à l’utilisateur de faire défiler horizontalement avec un overflow-x: auto.

Nom	Âge	Ville	Email
Jean Dupont	34	Paris	jean@example.com
Claire Dubois	28	Lyon	claire@example.com

<div class="table-scroll">
  <table>...</table>
</div>

.table-scroll {
  overflow-x: auto;
  display: block;
}

🔹 Méthode 2 : linéarisation du tableau

Chaque ligne devient une table tr {display: table;} et chaque cellule devient une ligne td {display: table-row;} .

Nom	Âge	Ville	Email
Jean Dupont	34	Paris	jean@example.com
Claire Dubois	28	Lyon	claire@example.com

🔹 Méthode 3 : Transformation en carte (mobile-first)

Le tableau devient une série de "cartes" où chaque ligne est affichée en bloc avec des étiquettes (attributs data-label).

Nom	Poste	Département	Téléphone
Alice Martin	Développeuse	Informatique	01 23 45 67 89
Marc Petit	Designer	Création	06 98 76 54 32

<td data-label="Nom">Alice Martin</td>

@media screen and (max-width: 600px) {
  .table-card td::before {
    content: attr(data-label);
  }
}

✅ Conseils supplémentaires

Utilisez data-label pour que l’utilisateur sache à quoi correspond chaque cellule.
Ne surchargez pas vos tableaux avec trop de colonnes.
Testez toujours sur différentes tailles d’écran.

💡 Astuce : Vous pouvez combiner les deux méthodes selon les besoins.