Réduire l'espace vertical entre les 2 lignes dans un tableau HTML

J'ai un tableau avec plusieurs lignes, par exemple, de cinq lignes. J'ai besoin de réduire l'écart entre les troisième et quatrième lignes.

Ci-dessous mon code:

<table>
    <tr>
        <td>First Row</td>
        <td>1</td>
    </tr>
    <tr>
        <td>Second Row</td>
        <td>2</td>
    </tr>
    <tr>
        <td>Third Row</td>
        <td>3</td>
    </tr>
    <tr>
        <td>Fourth Row</td>
        <td>4</td>
    </tr>

Le résultat est

Premier 1

Deuxième 2

Troisième 3

Quatrième 4

Je veux supprimer l'écart entre les troisième et quatrième lignes comme ci-dessous:

Premier 1

Deuxième 2

Tiers 3

Quatrième 4

Est-il possible de définir l'espacement entre les troisième et quatrième ligne uniquement à 0? afin de réduire l'écart entre eux?

Donc, ce que vous avez réellement dire, c'est que vous voulez que le contenu des lignes 3 et 4, pour être affichées côte à côte, correct? Serait le combiné contenu des lignes 3 et 4 être la même que la largeur de la ligne 1 ou la ligne 2?
Non, ce ne sera pas de la même largeur, il peut varier. les lignes 3 et 4, ci-dessous les uns des autres, mais pas d'écart entre eux, de remplissage ou de marge doit être égale à zéro.

OriginalL'auteur user2480288 | 2013-09-18

4

Il est intéressant de noter que l'espace peut être réduit par l'effondrement de la table des frontières:
```
table {
    border-collapse: collapse;
}
```
Que vous pourriez faire quelque chose de semblable à ce que Jukka K. Korpela suggère, et de padding sur tous les éléments, à l'exception de la dernière tr enfant à l'aide d'une combinaison de la :non()/:dernier enfant pseudo classes.

EXEMPLE
```
tr:not(:last-child) td {
    padding-top: 1em;
}
```
L'exemple ci-dessus fonctionne dans votre cas, cependant ciblées élément peut ne pas être le dernier élément. Vous pouvez par conséquent utiliser le :nth-child() pseudo classe de cibler l'élément souhaité.

EXEMPLE
```
tr td {
    padding-top: 1em;
}
tr:nth-child(4) td {
    padding-top: 0;
}
```
Comme vous pouvez le voir, cette approche fonctionne lorsque vous avez plus d'éléments:

Maintenant que j'ai édité la question de révéler le but de formatage, cette réponse n'est pas ce que la personne veut. Il semble qu'il veut l'espace vertical entre les lignes pour être diminué, plutôt que les lignes à mettre les uns à coté des autres.
C'était une précision de modifier. Si vous regardez la Démarque de la source de la question d'origine, vous pouvez voir que le demandeur a écrit la quatrième ligne ci-dessous sur la troisième ligne, pas à côté. C'est Markdown combinant à la fois les lignes de texte. Si le demandeur a effectivement voulu les lignes combinées, il aurait écrit de cette façon; c'est ainsi qu'il a été probablement familier avec Markdown, et n'a pas remarqué que sa mise en forme a été foiré. Puis-je revenir à la question précédente?
Je m'excuse de ne pas être clair sur ma question, Rory O'Kane a droit. Je voulais l'espace vertical entre les deux rangées d'être réduite.

OriginalL'auteur Josh Crozier
3

Sauf si vous utilisez des paramètres spéciaux en HTML, il y aura juste un couple de pixels entre les lignes d'une table. Si vous voulez vraiment supprimer ce, de la façon la plus simple est d'utiliser
```
<table cellpadding=0 cellspacing=0>
```
et puis padding comme vous le souhaitez, dans le CSS, sur des cellules individuelles, par exemple avec
```
tr:not(:last-child) td { padding-top: 4px }
```
J'ai beaucoup de lignes dans la colonne et je dois régler le rembourrage pour les cellules individuelles. Est-il un moyen de régler le remplissage d'une ligne dans un tableau à 0.
oui, mais vous devez spécifier quel ligne dans quel contexte, et vous devriez clarifier cela en éditant votre question, non pas seulement dans un commentaire ou poser une nouvelle question.

OriginalL'auteur Jukka K. Korpela

Vous devez vous connecter pour publier un commentaire.