Реально ли сделать такую таблицу и как?

Question

[newhacke]

Ну собственно не могу осилить вот такую вот конструкцию)) Братцы помогайте))) А то у меня мозг сейчас взорвется)) Ни в какую не получается)) Ну и вопрос на засыпку, можно ли на display grid сделать такое, что но что бы как то фиксить бордеры по типу border-collapse: collapse, и все они друг заменяют, а не прибавляются?

Comments

[Pavel Kuzyakin]

если это таблица, то чем старый добрый <table></table> не устравивает?

[newhacke]

Pavel Kuzyakin, так вот не получается осилить с помощью table)

[Alex Ozerov]

newhacke, напишите точнее с помощью какой(каких) технологий вам нужно сверстать данную таблицу, или вам все равно?

[Rerurk]

newhacke, посмотрите объединение ячеек

[Ankhena]

newhacke,

так вот не получается осилить с помощью table)

Сначала нужно выяснить, являются ли данные табличными.
Из вашего скрина такой вывод не сделать.

Если да, то верстать таблицами.
7 столбцов и 3 или 4 (не понятно, так надо или это вы так рисуете) строки. И rowspan и colspan.

Если нет, то гридами.
Вместо границ - фон у родителя и grid-gap.

Но вы не показали что именно у вас не выходит.

[newhacke]

всем огромное сапасибо

[newhacke]

Ankhena, Не могу понять почему вот это не работает? Для первой половины таблицы???

<table id="table">
  <tr>
    <td colspan="2" rowspan="2">1</td>
    <td colspan="2">2</td>
  </tr>
  <tr>
    <td rowspan="2">3</td>
    <td rowspan="2">3</td>
  </tr>
  <tr>
    <td >2</td>
    <td>2</td>
  </tr>
</table>

Answer 1

[Андрей Федоров]

https://codepen.io/aliencash/pen/oNzgLNy

Comments

[newhacke]

Спасибо огромное, но я хоть убей не догоняю почему вот это не работает для первой половины???

<table id="table">
  <tr>
    <td colspan="2" rowspan="2">1</td>
    <td colspan="2">2</td>
  </tr>
  <tr>
    <td rowspan="2">3</td>
    <td rowspan="2">3</td>
  </tr>
  <tr>
    <td >2</td>
    <td>2</td>
  </tr>
</table>

[newhacke]

Вечером отмечу решением, что бы фокус не потерять) Можете объяснить что происходитт в этот момент? вроде все по фэншую но нет, какой то косяк непонятный. хотя все логично..

Answer 2

[Alex Ozerov]

https://codepen.io/alexandr-ozerow/pen/bGwNwQv - flex
https://codepen.io/alexandr-ozerow/pen/QWKwGpP - table
https://codepen.io/alexandr-ozerow/pen/poEvNXg - grid

Comments

[newhacke]

пррлублируюсь, почему вот это не работает, почему для первой половины таблицы?

<table id="table">
  <tr>
    <td colspan="2" rowspan="2">1</td>
    <td colspan="2">2</td>
  </tr>
  <tr>
    <td rowspan="2">3</td>
    <td rowspan="2">3</td>
  </tr>
  <tr>
    <td >2</td>
    <td>2</td>
  </tr>
</table>

[newhacke]

Вечером отмечу решением, что бы фокус не потерять) Можете объяснить что происходитт в этот момент? вроде все по фэншую но нет, какой то косяк непонятный. хотя все логично..

[Alex Ozerov]

newhacke, потому что во второй tr не хватает элемента. Чтобы таблица заняла два или больше блоков-места ей нужны эти самые блоки. То-есть, вы указываете colspan="2",значить блок должен стать размером в 2 блока по ширине, но чтобы стать 2 блока по ширине ему нужен этот самый блок который он займет, но при этом вытолкнет его вправо. Обьяснить трудно, это нужно просто потратить час времени чтобы хорошо разобратся в таблицах, иначе вам просто никто не поможет

Answer 3

[Spaceoddity]

Не надо писать готовое решение. Надо просто натолкнуть автора на правильную работу с таблицами:
Продолжите все линии в вашей таблице до границ само таблицы. Это будет сетка вашей таблицы, т.е. даст вам необходимое кол-во рядов и столбцов. С этими данными строите таблицу. А зоны объединения рядов и столбцов делаете с помощью colspan и rowspan. На grid суть точно такая же.
P.S. Я тут вижу 7 столбцов и 4 ряда. С этими данными и стройте таблицу.