Как лучше переформировывать таблицу на мобильном разрешении?

Question

Как реализовать подобный функционал. Есть диалоговое окно в виде списка, в зависимости от выбора в нем пункта, формируется таблица. Как это на десктопе сделать понятно, а вот на мобильном она должна формироваться другого видна, вопрос как можно и лучше это сделать, что бы она вот так как на скрине переворачивалась? Я пока предполагаю формировать html в js и вставлять его, просто при мобильном разрешении формировать по другому, но мб есть у кого другой совет?

Answer 1

У меня есть такое решение для адаптива, не знаю, насколько здесь оно уместно. Идея в том, чтобы названия столбцов внести в data-атрибуты и выводить их через ::before.

td {
  border: 1px solid;
  padding: 10px;
}

@media(max-width: 800px) {
  thead {
    display: none;
  }
  table, td {
    display: block;
  }
  td {
    padding-left: 150px;
    position: relative;
  }
  
  td::before {
    content: attr(data-title);
    position: absolute;
    left: 10px;
  }
}

<table>
  <thead>
    <tr>
      <td>столбец 1</td>
      <td>столбец 2</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td data-title="столбец 1">данные 1</td>
      <td data-title="столбец 2">данные 2</td>
    </tr>
    <tr>
      <td data-title="столбец 1">данные 3</td>
      <td data-title="столбец 2">данные 4</td>
    </tr>
  </tbody>
</table>

БЛОГ НА HUSL

Как лучше переформировывать таблицу на мобильном разрешении?

Ответы (1 шт):