Преобразование таблицы HTML в flexbox – как имитировать td с помощью rowspan="2"

У меня есть таблица HTML, которую я пытаюсь заменить элементами div, используя flexbox.

У меня большая часть работает, но я не могу воспроизвести внешний вид td с rowspan="2".

Это моя таблица HTML и связанный с ней CSS:

#divMain table {
  width: 100%;
  table-layout: fixed;
  border: 1px solid black;
}

#divMain table tr {
  height: 100px;
}

#divMain table td {
  vertical-align: top;
  border: 1px solid black;
  background: yellow;
}

<div id = "divMain">
  <table>
    <tr>
      <td>blah</td>
      <td>blah</td>
      <td>blah</td>
    </tr>
    <tr>
      <td rowspan = "2">blah</td>
      <td>blah</td>
      <td>blah</td>
    </tr>
    <tr>
      <td>blah</td>
      <td>blah</td>
    </tr>
  </table>
</div>

Это мой набор элементов div с использованием flexbox и соответствующего CSS:

.table {
  display: flex;
  flex-flow: column nowrap;
  border: 1px solid black;
}

.row {
  display: flex;
}

.cell {
  height: 100px;
  vertical-align: top;
  border: 1px solid black;
  background: yellow;
  display: flex;
  flex: 1;
  justify-content: left;
  align-items: top;
}

<div class = "table">
  <div class = "row">
    <div class = "cell">blah</div>
    <div class = "cell">blah</div>
    <div class = "cell">blah</div>
  </div>
  <div class = "row">
    <div class = "cell">blah</div>
    <div class = "cell">blah</div>
    <div class = "cell">blah</div>
  </div>
  <div class = "row">
    <div class = "cell">blah</div>
    <div class = "cell">blah</div>
    <div class = "cell">blah</div>
  </div>
</div>

На этом рисунке красный кусок — это td с rowspan="2". Как мне добиться того же при использовании div с flexbox?

Почему вы хотите использовать flexbox здесь? Очевидным выбором для замены реальной таблицы будет сетка.

— 30.08.2024 12:25

Если вам нужно что-то похожее на таблицу, возможно, вы захотите использовать CSS-сетку вместо флексбокса. Flexbox не предназначен для такого использования.

— 30.08.2024 12:25

Ах. Мне было поручено заменить его на flexbox. Вместо этого я рассмотрю CSS-сетку. Спасибо за вклад.

— 30.08.2024 12:30

html css

30.08.2024 12:20

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Как предложено в комментариях, вы можете легко добиться этого с помощью CSS Grid вместо Flexbox:

    * {
        box-sizing: border-box;
    }
    .table {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        border: 1px solid black;
    }

    .cell {
        height: 100px;
        vertical-align: top;
        border: 1px solid black;
        background: yellow;
    }

    .cell.rowspan {
        height: 200px;
        grid-row: span 2;
    }

<div class = "table">
    <div class = "cell">blah</div>
    <div class = "cell">blah</div>
    <div class = "cell">blah</div>
    <div class = "cell rowspan">blah</div>
    <div class = "cell">blah</div>
    <div class = "cell">blah</div>
    <div class = "cell">blah</div>
    <div class = "cell">blah</div>
</div>

Мы использовали grid-template-columns: repeat(3, 1fr), чтобы определить три столбца одинаковой ширины, и grid-row: span 2, чтобы rowspan занимал две строки.

Отлично, спасибо большое, м-Сараби.

— 30.08.2024 13:34

30.08.2024 12:53