Уменьшить вертикальное пространство между двумя строками в таблице HTML

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

Вы могли бы сделать что-то подобное тому, что Юкки К. Корпела suggests и установить отступы всех элементов, кроме последнего tr ребенка, используя комбинацию псевдоклассов :not()/:last-child.

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

Как вы можете видеть, этот подход работает, когда у вас есть несколько элементов:

Answer 2

Если вы не используете специальные настройки в HTML, будет только пара пикселей между строками таблицы. Если вы действительно хотите удалить, что самый простой способ заключается в использовании

<table cellpadding=0 cellspacing=0> 

, а затем установить отступы по желанию, в CSS, на отдельных клетках, например, с

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