Comment ajouter de l'espace entre les lignes d'un tableau avec CSS ?

Comment créer un espace entre les lignes du tableau

La séparation des lignes du tableau peut être obtenue à l'aide de la propriété padding sur les éléments td. Pour fournir l'espacement souhaité, utilisez le CSS suivant :

/* Apply padding to td elements that are direct children of tr elements with class spaceUnder. */
tr.spaceUnder > td {
  padding-bottom: 1em;
}

Ce code garantit que le remplissage n'est appliqué qu'aux éléments td qui descendent directement des éléments tr avec la classe spaceUnder. Cela permet des tableaux imbriqués.

Pour démontrer, considérons le tableau suivant :

<table>
  <tbody>
    <tr>
      <td>A</td>
      <td>B</td>
    </tr>
    <tr class="spaceUnder">
      <td>C</td>
      <td>D</td>
    </tr>
    <tr>
      <td>E</td>
      <td>F</td>
    </tr>
  </tbody>
</table>

Avec le CSS fourni, il y aura un espace sous la ligne CD, tandis que les lignes AB et EF ne seront pas affectées. .

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!