Как расположить некоторые элементы td один под другим в одной строке?

Question

Есть таблица с некоторыми строками:

<table>
  <tbody>
    <tr>
      <td>Element1</td>
      <td>Element2</td>
      <td>Element3</td>
      <td>Element4</td>
    </tr>
  </tbody>
</table>

Сейчас выглядит как обычная строка, где каждый элемент идет в ряд один за другим. Мне нужно чтобы элементы Element1 и Element2 были расположены один под другим, а элементы Element3 и Element4 были расположены в ряд как обычно. Вот таким образом:

Element1
             Element3  Element4
Element2

Буду рад любым советам.

Answer 1

 <tr>
      <td>Element1</td>
      <td></td>
      <td></td>
    </tr>
 <tr>
      <td></td>
      <td>Element3</td>
      <td>Element4</td>
    </tr>
 <tr>
      <td>Element2</td>
      <td></td>
      <td></td>
    </tr>

Answer 2

Совет первый: избавиться от табличной верстки в принципе. Если не имеете возможности, то:

Совет второй: волшебное свойство display, примененное к таблице и ее элементам, превратит их c точки зрения подхода к верстке в div-ы, что позволит вам расставить их как угодно.

Если все же таблицы вам нужны обязательно, то достаточно вспомнить атрибуты ячеек, придуманные в самой первой версии таблиц именно для такого случая (бордер у таблицы добавил для наглядности):

<table border="1">
  <tbody>
    <tr>
      <td>Element1</td>
      <td rowspan="2">Element3</td>
      <td rowspan="2">Element4</td>
    </tr>
    <tr>
      <td>Element2</td>

    </tr>
  </tbody>
</table>

Answer 3

<table>
  <tbody style="display: grid;">
    <tr>
      <td>Element1</td>
    </tr>
<tr style="margin-left: 50%;">
      <td>Element3</td>
      <td>Element4</td>
    </tr>
  <tr>
      <td>Element2</td>
    </tr>
  </tbody>
</table>

И никаких лишних элементов. При желании можете перенести стили в отдельный блок или файл.

Используя только один tr:

tr {
  display: grid;
}
td:not(:first-child, :last-child) {
  margin-left: 50%;
  grid-area: 2 !important;
}
td:first-child {
  grid-area: 1;
}
td:last-child {
  grid-area: 3;
}

<table>
  <tbody>
    <tr>
      <td>Element1</td>
      <td>Element2</td>
      <td>Element3</td>
      <td>Element4</td>
    </tr>
  </tbody>
</table>

Референсы:

Answer 4

Вторую и терью клетку объединить с помощью rowspan="2" Тоесть El3 Сделает row двойного размера.

   <tr>
    <td>Element1</td>
    <td rowspan="2">Element3</td>
    <td rowspan="2">Element4</td>
  </tr>
  <tr>
    <td>Element2</td>
  </tr>

БЛОГ НА HUSL

Как расположить некоторые элементы td один под другим в одной строке?

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