Maison > interface Web > tutoriel CSS > Comment ajouter de l'espace entre les lignes d'un tableau sans utiliser CSS ?

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

Linda Hamilton
Libérer: 2024-11-13 06:56:02
original
861 Les gens l'ont consulté

How to Add Space Between Rows in a Table Without Using CSS?

Comment espacer entre les lignes d'un tableau sans utiliser CSS

Vous vous demandez peut-être s'il est possible d'ajouter de l'espace entre les lignes d'un tableau en utilisant CSS. Malheureusement, la propriété CSS border-spacing n'obtient pas cet effet souhaité. La propriété border-spacing ajoute uniquement de l'espace entre les cellules du tableau, pas entre les lignes.

Au lieu de cela, vous devrez utiliser un remplissage sur votre éléments pour ajouter de l'espace entre les lignes. Vous pouvez utiliser le code CSS suivant :

tr.classname td {
  padding-bottom: 5em;
}
Copier après la connexion

Cela ajoutera 5em de remplissage au bas de chaque élément dans le avec le nom de la classe. Vous pouvez ajuster la quantité de rembourrage selon vos besoins.

Voici un exemple de la façon dont cela fonctionnerait :

<table class="classname">
  <tbody>
    <tr>
      <td>Cell A</td>
      <td>Cell B</td>
    </tr>
    <tr>
      <td>Cell C</td>
      <td>Cell D</td>
    </tr>
  </tbody>
</table>
Copier après la connexion

Cela créera un tableau avec 5 em d'espace entre chaque rangée.

Notez que vous pouvez également utiliser un remplissage supérieur au lieu d'un remplissage inférieur, en fonction de l'effet souhaité.

Si vous devez ajouter de l'espace entre les lignes dans les tableaux imbriqués, vous pouvez utiliser le code CSS suivant :

tr.spaceUnder > td {
  padding-bottom: 1em;
}
Copier après la connexion

Cela ajoutera 1 em de rembourrage au bas de chaque élément qui est un enfant direct d'un élément élément avec la classe spaceUnder.

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!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal