html - 减少表格 HTML 中 2 行之间的垂直间距

Question

我有一个多行的表，例如五行。我需要缩小第三排和第四排之间的间隙。

下面是我的代码：

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

结果是

前 1

第二个 2

第三个 3

第四4

我想消除第三行和第四行之间的差距，如下所示：

前 1

第二个 2

第三 3
第四 4

是否可以将第三行和第四行之间的填充设置为 0？缩小他们之间的差距？

Answer 1

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

table {
    border-collapse: collapse;
}

您可以执行类似于 Jukka K. Korpela建议的操作，并使用/伪类tr的组合在除最后一个子元素之外的所有元素上设置填充。:not():last-child

这里的例子

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

上面的示例适用于您的实例，但是目标元素可能不是最后一个元素。因此，您可以使用:nth-child()伪类来定位所需的元素。

这里的例子

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

如您所见，当您有更多元素时，此方法有效：

Answer 2

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

<table cellpadding=0 cellspacing=0>

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

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