Как уменьшить расстояние между границами в таблице?

Question

У меня есть таблица с двумя строками, где есть один h1 заголовок в левом столбце. Два других столбца - это нормальные абзацы с сильным текстом.

Два правых столбца в первом ряду идут хорошо, но во втором ряду между ними слишком много вертикального пространства. Совершенно очевидно, что h1 увеличивает вертикальное пространство между ними. Но как я могу исправить это, если возможно вообще? Мне действительно нужно оставить h1 вне стола?

table { 
 
    width: 80%; 
 
    margin-left: 2%; 
 
    border-collapse: separate; 
 
    border-spacing: 0 1px; 
 
}

<table> 
 
    <tr> 
 
    <td><h1>Some big text</h1></td> 
 
    <td><p><strong>Some</strong></p> 
 
    <td><p><strong>smaller text</strong></p></td> 
 
    </tr> 
 
    <tr> 
 
    <td></td> 
 
    <td><p><strong>Here come</strong></p></td> 
 
    <td><p><strong>Second row</strong></p></td> 
 
</table>

Answer 1

Это расстояние, скорее всего, с запасом по умолчанию на h1 и p тегов, сбросить их и посмотреть.

table { 
 
    width: 80%; 
 
    margin-left: 2%; 
 
    border-collapse: separate; 
 
    border-spacing: 0 1px; 
 
} 
 
td { 
 
    border: 1px solid aqua; /*for demo purpose*/ 
 
} 
 
table h1, table p { 
 
    margin: 0; /*reset the margin*/ 
 
}

<table> 
 
    <tr> 
 
    <td><h1>Some big text</h1></td> 
 
    <td><p><strong>Some</strong></p> 
 
    <td><p><strong>smaller text</strong></p></td> 
 
    </tr> 
 
    <tr> 
 
    <td></td> 
 
    <td><p><strong>Here come</strong></p></td> 
 
    <td><p><strong>Second row</strong></p></td> 
 
    </tr> 
 
</table>

Edit: я понял (см комментариев ниже), что OP относится о расстоянии на границы. Это и пустой <td>, и стиль border-collapse. Чтобы объединить эти два <td>, вы можете использовать rowspan. Чтобы избавиться от небольшого количества пространства, используйте border-collapse:collapse.

table { 
 
    width: 80%; 
 
    margin-left: 2%; 
 
    border-collapse: collapse; /*set it to collapse*/ 
 
} 
 
td { 
 
    border: 1px solid aqua; /*for demo purpose*/ 
 
} 
 
table h1, table p { 
 
    margin: 0; 
 
}

<table> 
 
    <tr> 
 
    <td rowspan="2"><h1>Some big text</h1></td> 
 
    <td><p><strong>Some</strong></p></td> 
 
    <td><p><strong>smaller text</strong></p></td> 
 
    </tr> 
 
    <tr> 
 
    <td><p><strong>Here come</strong></p></td> 
 
    <td><p><strong>Second row</strong></p></td> 
 
    </tr> 
 
</table>

Answer 2

Попробуйте удалить маржу от h1, как так.

h1 { 
    margin: 0; 
} 

Answer 3

Есть две вещи, которые вы можете сделать. Во-первых, делает h1 меньшим по высоте, уменьшая его margin и его родителя padding.

Кроме того, вы можете использовать атрибут rowspan в td, который содержит ваш h1 вместо того, чтобы иметь пустой td на втором ряду.

HTML-:

<table> 
    <tr> 
     <td rowspan="2"><h1>Some big text</h1></td> 
     <td><p><strong>Some</strong></p> 
     <td><p><strong>smaller text</strong></p></td> 
    </tr> 
    <tr> 
     <td><p><strong>Here come</strong></p></td> 
     <td><p><strong>Second row</strong></p></td> 
</table> 

И CSS:

table { 
    width: 80%; 
    margin-left: 2%; 
    border-collapse: separate; 
    border-spacing: 0 1px; 
} 

table tr td { 
    padding: 0; 
} 

table tr td h1 { 
    margin: 0; 
} 

table tr td p { 
    margin: 0; 
}