0

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

<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

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

4 ответа 4

1

<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>

Референсы:

2
  • Спасибо за ответ. Но можно ли сделать такую расстановку в одной строке, не используя столько tr ? 3 июн 2022 в 10:22
  • @ArnoDorian добавил ещё вариант, там чуть больше CSS, но зато используется только один tr.
    – ΝNL993
    3 июн 2022 в 10:33
0
 <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>
4
  • Костыль какой-то, а не ответ.
    – ΝNL993
    3 июн 2022 в 9:49
  • И в чем костыль при табличной верстке используемой автором? Вопрос не затрагивает адаптивную верстку на тех же флексах. Знаеш ответ качественнее, добавь не стесняйся! 3 июн 2022 в 9:56
  • Готово. (К тому же можно использовать пропорции grid-а по типу grid-area и т.п. при моём варианте)
    – ΝNL993
    3 июн 2022 в 10:09
  • Спасибо за ответы. Но можно ли сделать такую расстановку в одной строке, не используя столько tr ? 3 июн 2022 в 10:22
0

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

Совет второй: волшебное свойство 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>

7
  • избавиться от табличной верстки в принципе. и чем же тогда заменить? 3 июн 2022 в 9:45
  • дивами. П.С. добавил свой вариант для таблицы. 3 июн 2022 в 14:54
  • Убрал border-ы, у вас всё правильно, но автор вроде бы хочет чтобы всё было в одном tr элементе.
    – ΝNL993
    3 июн 2022 в 17:51
  • @Инквизитор, нужно использовать свои элементы по назначению. Не говорится же, что это будет для верстки сайта. 4 июн 2022 в 0:22
  • @OliverPatterson, то вы спрашиваете "чем заменить", то вам не нравится то, чем предлагаю заменить. Когда разберетесь со своими внутренними противоречиями, напишите, пожалуйста, что в моем предложении не соответствует понятию "использовать свои элементы по назначению". 5 июн 2022 в 16:13
0

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

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

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.