Неожиданно ломается HTML таблица

Question

Народ, всем привет. Помогите, пожалуйста, задача - сверстать таблицу с картинки. Код вроде пишу правильно, а она ломается, пропадает третья строка. Заранее очень благодарен!

Мой код:

    <table border = "1" cellspacing = "0" cellpadding = "15" width = "700">
        <tbody>
            <tr>
                <td rowspan = "3"></td>
                <td colspan = "2" rowspan = "2"></td>
                <td></td>
                <td rowspan = "2"></td>
                <td></td>
            </tr>
            <tr>
                <td rowspan = "2"></td>
                <td rowspan = "2"></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
            </tr>
        </tbody>
    </table>

P.S. Знаю что отступы и прочие стили надо через CSS делать :)

Answer 1

Народ, уже разобрался. Там коллега предлагал пронумеровать - к сожалению, проблема не решилась. Если кто столкнётся с похожей - задайте строкам таблицы явную высоту, тогда все работает)

Answer 2

Реализация на grid:

.grid-container {
  display: grid;
  grid-template-columns: repeat(6, minmax(100px, 1fr));
  grid-template-rows: repeat(3, minmax(50px, 1fr));
  grid-template-areas:
    "block1 block2 block2 block3 block4 block5"
    "block1 block2 block2 block8 block4 block10"
    "block1 block6 block7 block8 block9 block10";
    
  background-color: #252525;
  gap: 2px;
  padding: 2px;
}

.grid__item {
  background-color: #fff;
}

.block1 {
  grid-area: block1;
}

.block3 {
  grid-area: block3;
}

.block4 {
  grid-area: block4;
}

.block5 {
  grid-area: block5;
}

.block2 {
  grid-area: block2;
}

.block6 {
  grid-area: block6;
}

.block7 {
  grid-area: block7;
}

.block8 {
  grid-area: block8;
}

.block9 {
  grid-area: block9;
}

.block10 {
  grid-area: block10;
}

<div class="grid-container">
  <div class="grid__item block1"></div>
  <div class="grid__item block3"></div>
  <div class="grid__item block4"></div>
  <div class="grid__item block5"></div>
  <div class="grid__item block2"></div>
  <div class="grid__item block6"></div>
  <div class="grid__item block7"></div>
  <div class="grid__item block8"></div>
  <div class="grid__item block9"></div>
  <div class="grid__item block10"></div>
</div>

БЛОГ НА HUSL

Неожиданно ломается HTML таблица

Ответы (2 шт):