Раздвинуть строки таблицы

[Dmitry33]

Есть таблица, нужно увеличить расстояние между третьей и четвертой строкой, т.е. только одно расстояние. margin-top не работает. Сделать два tbody тоже не получается, т.к. одна из клеточек таблицы должна "расширяться" на 4 строки.

  <table>
    <tr><td>row 1 cell 1</td><td>row 1 cell 2</td><td rowspan=4>row 1 cell 3<br>must contain<br>several lines</td></tr>
    <tr><td>row 2 cell 1</td><td>row 2 cell 2</td></tr>
    <tr><td>row 3 cell 1</td><td>row 3 cell 2</td></tr>
    <tr style="margin-top: 10px"><td>row 4 cell 1</td><td>row 4 cell 2</td></tr>
    <tr><td>row 5 cell 1</td><td>row 5 cell 2</td><td>row 5 cell 3</td></tr>
    <tr><td>row 6 cell 1</td><td>row 6 cell 2</td><td>row 5 cell 3</td></tr>
  </table>

Всякие там line-height увеличивают расстояние и снизу и сверху, т.е. если задать для одной строки, интервал увеличится и до и после, а нужно увеличить только один интрервал. (между row 3 и cow 4)

[klierik]

Используйте пустую строку, которая будет отвечать только за отступ (без контента)

[Dmitry33]

Пустую строку - понятно, но хочется узнать можно ли это сделать стилями, типа, чтобы разделить содержание и оформление.

[klierik]

Можно, но тогда следует использовать или Flex или Grid. Обычной таблицей такое поведение невозможно.

Но можно попробовать что-то подобное:

table {
    border-collapse: separate;
    border-spacing: 0 1em;
}

 

[Switch74]

не понял что именно нужно реализовать, а если padding-top для td указать, то что нужно получается или нет?

 

[Dmitry33]

Получается то, что на картинке слева, нужно раздвинуть ОДНО расстояние между строками, как на картинке справа.

https://ibb.co/NW4yq79

[Switch74]

тогда как выше предложили пустую строку

  <table>
    <tr><td>row 1 cell 1</td><td>row 1 cell 2</td><td rowspan=5>row 1 cell 3<br>must contain<br>several lines</td></tr>
    <tr><td>row 2 cell 1</td><td>row 2 cell 2</td></tr>
    <tr><td>row 3 cell 1</td><td>row 3 cell 2</td></tr>
    <tr><td colspan="2" style="padding-top:10px;"></td></tr>
    <tr><td>row 4 cell 1</td><td>row 4 cell 2</td></tr>
    <tr><td>row 5 cell 1</td><td>row 5 cell 2</td><td>row 5 cell 3</td></tr>
    <tr><td>row 6 cell 1</td><td>row 6 cell 2</td><td>row 5 cell 3</td></tr>
  </table>

или если подсветка ячеек не обязательна, то можно так

<table>
    <tr><td>row 1 cell 1</td><td>row 1 cell 2</td><td rowspan=4>row 1 cell 3<br>must contain<br>several lines</td></tr>
    <tr><td>row 2 cell 1</td><td>row 2 cell 2</td></tr>
    <tr><td>row 3 cell 1</td><td>row 3 cell 2</td></tr>
    <tr><td style="padding-top:10px;">row 4 cell 1</td><td style="padding-top:10px;">row 4 cell 2</td></tr>
    <tr><td>row 5 cell 1</td><td>row 5 cell 2</td><td>row 5 cell 3</td></tr>
    <tr><td>row 6 cell 1</td><td>row 6 cell 2</td><td>row 5 cell 3</td></tr>
  </table>

 

 

[Dmitry33]

Switch74

Спасибо, второй вариант как раз то, что хотелось.

Не понятно только, почему margin-top не работает, пробовал задавать и для клеточек, и для всей строки. А про padding как-то не  подумал...

[Switch74]

margin внутри таблицы не работает, кста еще можно вот так реализовать
так заливка ячеек будет корректно работать, если она нужна будет

  <table>
    <tr><td>row 1 cell 1</td><td>row 1 cell 2</td><td rowspan=4>row 1 cell 3<br>must contain<br>several lines</td></tr>
    <tr><td>row 2 cell 1</td><td>row 2 cell 2</td></tr>
    <tr><td>row 3 cell 1</td><td>row 3 cell 2</td></tr>
    <tr><td style="border-top:10px solid #fff;">row 4 cell 1</td><td style="border-top:10px solid #fff;">row 4 cell 2</td></tr>
    <tr><td>row 5 cell 1</td><td>row 5 cell 2</td><td>row 5 cell 3</td></tr>
    <tr><td>row 6 cell 1</td><td>row 6 cell 2</td><td>row 5 cell 3</td></tr>
  </table>

 

если не критично еще можно использовать обертку внутри ячеек, и с ней много чего можно дополнительного реализовать в таблицах