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

Comment créer un espace entre les lignes dans un tableau

Question :

Est-il possible d'ajouter de l'espace entre les lignes dans un tableau utilisant CSS ? Le code suivant ne produit pas le résultat souhaité :

tr.classname {
  border-spacing: 5em;
}

Réponse :

Pour créer un espace entre les lignes d'un tableau, vous devez utiliser un remplissage sur le td éléments. Vous pouvez utiliser le code CSS suivant :

tr.spaceUnder > td {
  padding-bottom: 1em;
}

Dans ce code, le tr.spaceUnder > Le sélecteur td applique le remplissage uniquement aux éléments td qui sont des enfants directs des éléments tr avec la classe spaceUnder. Cela vous permet d'utiliser des tableaux imbriqués sans affecter l'espacement entre les lignes.

Exemple :

<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>

Sortie :

A	B
C	D
E	F

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!