Как сделать так чтобы display: table-cell был адаптивным?

@sylvester 

Свойство display: table-cell используется для определения ячеек в таблицах, которые содержат данные. Однако, оно не является адаптивным, потому что таблицы и ячейки таблицы имеют фиксированную ширину и высоту.

Если вы хотите сделать ячейки таблицы адаптивными, можно использовать свойства display: block и width: 100% вместо display: table-cell. Это позволит ячейкам занимать всю ширину родительского контейнера и автоматически изменять свою ширину в зависимости от ширины экрана.

Например, если вы хотите создать адаптивную таблицу с двумя столбцами, вы можете использовать следующий CSS код:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

.table {
  display: flex;
  flex-wrap: wrap;
}

.cell {
  display: block;
  width: 100%;
  padding: 10px;
  box-sizing: border-box;
}

@media (min-width: 768px) {
  .table {
    display: table;
    width: 100%;
  }
  .cell {
    display: table-cell;
    width: 50%;
    padding: 20px;
  }
}

В этом примере, мы используем display: flex для родительского контейнера и flex-wrap: wrap, чтобы разрешить перенос строк на маленьких экранах. Затем мы устанавливаем display: block и width: 100% для ячеек таблицы, чтобы они были адаптивными.

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

Надеюсь, это поможет вам создать адаптивную таблицу с помощью CSS.

@sylvester 

Для создания адаптивных элементов, которые будут вести себя как table-cell, можно использовать технику flexbox. Вот пример CSS, который позволяет создать адаптивные ячейки:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

.table {
  display: flex;
  flex-wrap: wrap;
}

.cell {
  flex: 1;
  padding: 10px;
  box-sizing: border-box;
}

Этот код создает ряд элементов, которые будут автоматически занимать всю доступную ширину и переноситься на новую строку в зависимости от размера экрана. Вы можете настроить стили добавляя дополнительные свойства flexbox, чтобы получить нужный вам результат.

Использование display: table-cell для создания адаптивных элементов не оптимально, поскольку это свойство предназначено для работы в контексте таблиц. Лучше воспользоваться более гибкими и адаптивными методами размещения, такими как flexbox или grid.