Андрюха2, вот такой вариант:

<style>
.common_block {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  text-align: center;
}
.one_block {grid-column: 1 / -1;grid-row: 1;background: red;}
.two_block {grid-column: 1 / 3;grid-row: 2;background: blue;}
.three_block {grid-column: 3 / 5;grid-row: 2;background: green;}
.four_block {grid-column: 5 / 7;grid-row: 2;background: aqua;}
.five_block {grid-column: 1 / 4;grid-row: 3;background: bisque;}
.six_block {grid-column: 4 / 7;grid-row: 3;background: burlywood;}
.seven_block {grid-column: 1 / -1;grid-row: 4;background: aquamarine;}
</style>

<div class="common_block">
  <div class="one_block">Первый блок</div>
  <div class="two_block">Второй блок</div>
  <div class="three_block">Третий блок</div>
  <div class="four_block">Четвертый блок</div>
  <div class="five_block">Пятый блок</div>
  <div class="six_block">Шестой блок</div>
  <div class="seven_block">Седьмой блок</div>
</div>

Добавил фон для наглядности, пример:
[html]<style>
.common_block {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  text-align: center;
}
.one_block {grid-column: 1 / -1;grid-row: 1;background: red;}
.two_block {grid-column: 1 / 3;grid-row: 2;background: blue;}
.three_block {grid-column: 3 / 5;grid-row: 2;background: green;}
.four_block {grid-column: 5 / 7;grid-row: 2;background: aqua;}
.five_block {grid-column: 1 / 4;grid-row: 3;background: bisque;}
.six_block {grid-column: 4 / 7;grid-row: 3;background: burlywood;}
.seven_block {grid-column: 1 / -1;grid-row: 4;background: aquamarine;}
</style>

<div class="common_block">
  <div class="one_block">Первый блок</div>
  <div class="two_block">Второй блок</div>
  <div class="three_block">Третий блок</div>
  <div class="four_block">Четвертый блок</div>
  <div class="five_block">Пятый блок</div>
  <div class="six_block">Шестой блок</div>
  <div class="seven_block">Седьмой блок</div>
</div>[/html]

Отредактировано kolobdur74 (Вс, 20 Фев 2022 21:40:49)

Таблица штука хорошая, но не гибкая.. Дефф, сделал через одну таблицу, а через одну таблицу это не сделать, нужна вторая, вложенная таблица.. Это косность таблицы - нижние ячейки наследуют расположение верхних, их нельзя посредине одной ячейки выставить.. Я сделал не через таблицу, а через css свойство грид.. Грид - это css свойство, которое делает сеточную структуру, напоминающую таблицу..

Вот так выглядит структура через инструмент вебразработчика в браузере:

Пунктирные линии (грид линии) - это границы грид областей.. Каждая линия имеет свой номер начиная сверху, и начиная слева.. Соответственно первая линия имеет номер 1, а последняя по вертикали (колонки) 7, по горизонтали (ряды) 5.. Нумерация идет и наоборот, но тогда уже будет со знаком минус.. Я задал каждому блоку свое положение по этим грид линиям, к примеру:

grid-column: 1 / -1; - расположение по вертикали (колонки) от первой линии, до последней..
grid-row: 1; - расположение от первой линии по горизонтали (ряды)..

Ну, и т.д.

Здесь я выставил количество повторяющихся колонок с шириной 1fr (1fr - это единица измерения, она занимает всё свободное пространство. так как все колонки 1fr, то ширина у них у всех будет одинаковая):

Это же запись аналогична вот этой:

Вот хорошая статья про гриды: https://css-live.ru/articles/podrobno-o … ayout.html

Отредактировано kolobdur74 (Вс, 20 Фев 2022 23:57:59)

[html]<style>
  .punbb .My-Tbl td{
  height:33px;
  border:red solid 2px!important;
  }
</style>
<table class="My-Tbl" style="width:500px;able-layout: auto;border-color:red">
<tr>
        <td colspan="6"></td>
    </tr>
    <tr>
        <td colspan="2"></td>
        <td colspan="2"></td>
        <td colspan="2"></td>
    </tr>
    <tr>
        <td colspan="3"></td>
        <td colspan="3"></td>
    </tr>
    <tr>
        <td colspan="6"></td>
    </tr>
</table>[/html]

Отредактировано Deff (Пн, 21 Фев 2022 00:27:03)

Значит дело в браузере.. Ты никак в Мозилле смотришь? У него своя спецификация)) В хромиум движках отображение такое (Эдж, Опера, Хром):

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

Отредактировано kolobdur74 (Пн, 21 Фев 2022 06:14:19)