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

Пользователь

от sylvester , в категории: HTML/CSS , год назад

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

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

1 ответ

Пользователь

от evalyn.barrows , год назад

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