Как сделать адаптивную таблицу?

Question

[Кирилл]

Как сделать адаптивную таблицу, как отображено на картинке?
Спасибо

td {
  display:inline-block;
  min-width: 320px;
max-width: 414px;
}

Comments

[Дмитрий]

Зачем задавать ячейкам таблицы display:inline-block; ?
Используйте уже тогда div (section) + flex

[Кирилл]

Дмитрий, мой уровень программирования, как у кота способность разговаривать ) подскажите как реализовать ? Я весь интернет перекопал но ничего путного не нашел (

[Дмитрий]

Если используйте таблицы - Пример 1
Или так - Пример 2

[Кирилл]

Дмитрий, Вы ГЕНИЙ! Большое спасибо! Все работает!

Answer 1

[Роман]

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

Answer 2

[Orbitter]

Чтобы сделать контент в 2 колонки не обязательно использовать таблицу.
Все, что нужно - это сделать flex блок.

<div class="flex_block">
  <div>Колонка 1</div>
  <div>Колонка 2</div>
</div>

.flex_block {
  width: 100%;
  display: flex;
}
.flex_block > div {
  flex: 1 1 auto;
}

Свойства блоков, например ширину, "тягучесть", порядок, можно варьировать. На самом деле возможностей там куча. Если не знакомы с flexbox вот справка: https://html5.by/blog/flexbox/