0

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

введите сюда описание изображения

1
  • Код, код, добавьте ваш код.
    – kizoso
    1 авг 2018 в 16:26

2 ответа 2

0

Через js можно создать новые строки таблицы, задать им отдельный класс и сделать их адаптивными:

const tables = document.querySelectorAll('.js-adaptive-table');
tables.forEach((table) => {
  let trs = table.querySelectorAll('tr');
  let tds_length = trs[0].children.length;
  let tbody = table.querySelector('tbody');

  while (--tds_length >= 0) {
    let tr = document.createElement('tr');

    trs.forEach((tds) => {
      tr.insertAdjacentElement('beforeend', tds.children[tds_length].cloneNode(true));
    });

    tr.classList.add('adaptive-tr');
    tbody.insertAdjacentElement('afterbegin', tr);
  }
});
td {
  width: 100px;
  height: 20px;
  background-color: red;
  color: white;
}

thead td {
  background-color: black;
}

tr {
  display: none;
}

tr.adaptive-tr {
  display: flex;
  flex-direction: column;
}

tr.adaptive-tr td:first-of-type {
  background-color: black;
}

@media (min-width: 600px) {
  tr.adaptive-tr {
    display: none;
  }
  tr {
    display: table;
  }
}
<table class="js-adaptive-table">
  <thead>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
    </tr>
  </thead>
  <tr>
    <td>5</td>
    <td>6</td>
    <td>7</td>
    <td>8</td>
  </tr>
  <tr>
    <td>9</td>
    <td>10</td>
    <td>11</td>
    <td>12</td>
  </tr>
  <tr>
    <td>13</td>
    <td>14</td>
    <td>15</td>
    <td>16</td>
  </tr>
  <tr>
    <td>17</td>
    <td>18</td>
    <td>19</td>
    <td>20</td>
  </tr>
</table>

0

Если есть возможность влезть в код таблицы - надо это сделать и переверстать ее дивами.

Если нет - можно поизвращаться с помощью, например, flex:

.GeneratedTable {
  display: flex;
  flex-direction: column;
}

.GeneratedTable tbody,
.GeneratedTable thead,
.GeneratedTable tr {
  display: contents;
}

.GeneratedTable td,
.GeneratedTable th {
  display: block;
}

.GeneratedTable td:nth-of-type(1),
.GeneratedTable th:nth-of-type(1) {
  order: 1;
}

.GeneratedTable td:nth-of-type(2),
.GeneratedTable th:nth-of-type(2) {
  order: 2;
}

.GeneratedTable td:nth-of-type(3),
.GeneratedTable th:nth-of-type(3) {
  order: 3;
}
<table class="GeneratedTable">
  <thead>
    <tr>
      <th>h1</th>
      <th>h2</th>
      <th>h3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>4</td>
      <td>5</td>
      <td>6</td>
    </tr>
    <tr>
      <td>7</td>
      <td>8</td>
      <td>9</td>
    </tr>
  </tbody>
</table>

Стили заданы грязно и негибко, и не факт, что везде поддерживаются, но полировать ответ до совершенства мне лень =)

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.