CSS : une méthode simple pour définir la largeur des colonnes d’un tableau

Voici une méthode très simple pour dimensionner les colonnes de votre tableau avec quelques lignes de CSS, plutôt que de donner des valeurs en ligne à chaque cellule. Cette méthode facilite grandement la création de tableaux responsives.

Démo : le rendu

CSS

Copiez le code ci-dessous et collez-le dans votre fichier CSS.

table tr td { padding: 20px; }
table td:nth-child(1) { width: 35%; }
table td:nth-child(2) { width: 15%; }
table td:nth-child(3) { width: 5%; }
table td:nth-child(4) { width: 35%; }
table td:nth-child(5) { width: 10%; }

HTML

Copiez le code ci-dessous et collez-le dans votre document HTML.

<table class="table" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td>35%</td>
    <td>15%</td>
    <td>5%</td>
    <td>35%</td>
    <td>10%</td>
  </tr>
  <tr>
    <td>A</td>
    <td>B</td>
    <td>C</td>
    <td>D</td>
    <td>E</td>
  </tr>
  <tr>
    <td>A</td>
    <td>B</td>
    <td>C</td>
    <td>D</td>
    <td>E</td>
  </tr>
  <tr>
    <td>A</td>
    <td>B</td>
    <td>C</td>
    <td>D</td>
    <td>E</td>
  </tr>
</table>

Vous pouvez copier le CSS et le HTML dans votre fichier et les adapter à votre goût !

Remarque : ces sélecteurs ciblent tous les tableaux de la page. Pour les limiter à un seul tableau, ajoutez une classe devant chaque sélecteur, par exemple .my-table td:nth-child(1). De plus, le remplissage et le contenu imposent une largeur minimale : les colonnes très étroites (comme celle de 5 %) peuvent donc s’afficher plus larges que prévu.