Reduce vertical space between two rows in an HTML table

Question

I have a table with several rows, for example five rows. I need to reduce the gap between the third and fourth lines.

Below is my 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> 

Result

First 1

Second 2

Third 3

Fourth 4

I want to remove the gap between the third and fourth lines, as shown below:

First 1

Second 2

Third 3
Fourth 4

Is it possible to indent between the third and fourth lines only to 0? narrow the gap between them?

Answer 1

It is worth noting that space can be reduced by folding the table borders:

 table { border-collapse: collapse; } 

You can do something similar to what Jukka K. Korpela offers, and install a complement for all elements except the last child tr , using the combination :not() / :last-child pseudo :last-child classes.

EXAMPLE HERE

 tr:not(:last-child) td { padding-top: 1em; } 

The above example works on your instance, however the target element may not be the last element. Therefore, you can use the pseudo-class for :nth-child() to specify the desired item.

EXAMPLE HERE

 tr td { padding-top: 1em; } tr:nth-child(4) td { padding-top: 0; } 

As you can see, this approach works when you have more elements:

Answer 2

If you do not use special settings in HTML, there will be only a few pixels between the rows of the table. If you really want to remove this, the easiest way is to use

 <table cellpadding=0 cellspacing=0> 

and then, if desired, install the add-on in CSS, on separate cells, for example. from

 tr:not(:last-child) td { padding-top: 4px }