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

概述我有一个包含多行的表,例如五行.我需要缩小第三和第四行之间的差距. 以下是我的代码： <table> <tr> <td>First Row</td> <td>1</td> </tr> <tr> <td>Second Row</td> <td>2</td> </tr> <tr> < 我有一个包含多行的表,例如五行.我需要缩小第三和第四行之间的差距.

以下是我的代码：

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

结果是

First 1

Second 2

Third 3

Fourth 4

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

First 1

Second 2

Third 3

Fourth 4

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

解决方法 值得注意的是,通过折叠桌子的边框可以减少空间：

table {    border-collapse: collapse;}

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

EXAMPLE HERE

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

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

EXAMPLE HERE

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

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

总结

以上是内存溢出为你收集整理的减少表格HTML中2行之间的垂直空间全部内容，希望文章能够帮你解决减少表格HTML中2行之间的垂直空间所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。