Створення адаптивної таблиці, яка перетворюється в список для мобільного перегляду

8 Березня 2024 в 18:49 136

Як можна створити адаптивну таблицю, яка змінюється в список для мобільного перегляду? Я хочу створити адаптивну таблицю з іменами артистів, яка має виглядати як приклад, наведений. Я знайшов код для таблиці в Інтернеті і підлаштував його під свої потреби. Однак, коли вона згортається для мобільного перегляду, елементи, які мають бути невидимими, все ще “займають місце”, і список імен має прогалини.

Я знаю, що код, ймовірно, виглядає складніше, ніж він мав би бути, але я не знаю, як це вирішити. У режимі робочого стола я хочу, щоб кожний ряд імен був розділений ще одним рядком з символами ✧, як це реалізовано на веб-сайті-прикладі.

/* Стилізація сторінки ================================== */
html {
  height: 100%;
  background-color: #EEE;
}
body {
  box-sizing: border-box;
  min-height: 100%;
  margin: 0 auto;
  padding: 2em;
  max-width: 800px;
  font-size: 1.2em;
  background-color: white;
  text-align: center;
}
/* Таблиці ================================== */
.Rtable {
  display: flex;
  flex-wrap: wrap;
  margin: 0 0 3em 0;
  padding: 0;
  position: relative;
  top: 3px;
  left: 3px;
}
.Rtable-cell {
  box-sizing: border-box;
  flex-grow: 1;
  width: 100%;
  padding: 4px;
  overflow: hidden;
  list-style: none;
  border: solid 3px white;
  background: rgba(112, 128, 144, 0.2);
}
.Rtable-cell-gap {
  border: solid 3px white;
  background: rgba(112, 128, 144, 0.2);
}
.Rtable-cell,
.Rtable-cell-gap {
  margin: -3px 0 0 -3px;
  background-color: white;
  border-color: #e2e6e9;
}
/* Розмір стовпців таблиці ================================== */
.Rtable--5cols>.Rtable-cell {
  width: 30%;
}
.Rtable--5cols>.Rtable-cell-gap {
  width: 5%;
}
/* Адаптивний дизайн ==================================== */
@media all and (max-width: 500px) {
  .Rtable--collapse {
    display: block;
  }
  .Rtable--collapse>.Rtable-cell {
    width: 100% !important;
  }
  .Rtable--collapse>.Rtable-cell--foot {
    margin-bottom: 1em;
  }
}
.no-flexbox .Rtable {
  display: block;
}
.no-flexbox .Rtable>.Rtable-cell {
  width: 100%;
}
.no-flexbox .Rtable>.Rtable-cell--foot {
  margin-bottom: 1em;
}