减少表HTML中两行之间的垂直空间

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

我有一个包含多行的表，例如5行。我需要减少第三行和第四行之间的差距。

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>

The result is

结果是

First 1

第一个1

Second 2

第二个2

Third 3

第三个3

Fourth 4

第四个4

I want to remove the gap between the third and fourth rows as below:

我想把第三和第四行之间的差距缩小如下:

First 1

第一个1

Second 2

第二个2

Third 3
Fourth 4

第三个3第四4

Is it possible to set the padding between third and fourth row only to 0? to reduce the gap between them?

是否可以将第三行和第四行之间的填充设置为0?减少他们之间的差距?

2 个解决方案

#1

Unless you use special settings in HTML, there will be just a couple of pixels between rows of a table. If you really want to remove that, the simplest way is to use

除非在HTML中使用特殊的设置，否则在表的行之间只有几个像素。如果您真的想删除它，最简单的方法就是使用它

<table cellpadding=0 cellspacing=0>

and then set padding as desired, in CSS, on individual cells, e.g. with

然后在CSS中，根据需要在单个单元格上设置填充，例如with

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

#2

It's worth noting that the space can be reduced by collapsing the table's borders:

值得注意的是，通过折叠表的边框可以减少空间:

table {
    border-collapse: collapse;
}

You could do something similar to what Jukka K. Korpela suggests, and set padding on all the elements except the last tr child using a combination of the :not()/:last-child pseudo classes.

您可以做一些类似于Jukka K. Korpela建议的事情，使用:not()/:last-child pseudo类的组合在所有元素上设置填充(除了最后一个tr子元素)。

EXAMPLE HERE

例子

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

The above example works in your instance, however the targeted element may not be the last element. You could therefore use the :nth-child() pseudo class to target the desired element.

上面的示例在您的实例中工作，但是目标元素可能不是最后一个元素。因此，您可以使用:nth-child() pseudo类来针对所需的元素。

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:

正如您所看到的，当您有更多的元素时，这种方法是有效的: