减少表格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>

结果是

  

第一个

     

第二个2

     

第三个3

     

第四个4

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

  

第一个

     

第二个2

     

第三名3   
  第四季度

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

Answer 1

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

table {
    border-collapse: collapse;
}

您可以执行类似于Jukka K. Korpela suggests的操作，并使用:not() / {{3的组合设置除最后tr个孩子以外的所有元素的填充伪类。

:last-child

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

以上示例适用于您的实例，但目标元素可能不是最后一个元素。因此，您可以使用EXAMPLE HERE伪类来定位所需的元素。

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