5

1. Желаемое поведение

Положим, имеется такая таблица:

Оригинал таблицы

Хотелось бы, чтобы на устройствах с небольшой шириной экрана она выглядела следующим образом:

Желаемое поведение на мобильных устройствах

То есть слева — thead, справа — tbody.

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

2. Цель

Адаптивные таблицы как на изображении выше. Необязательно задействовать плагин, о котором идёт речь ниже, и flexbox вообще. Подойдут любые решения для статических сайтов (где, как известно, используются только HTML/CSS/JavaScript).

3. Плагин responsive-tables

я нашёл плагин для адаптивных таблиц, использующий flexbox. Если в ячейке таблицы только ссылка или только текст, то получаю желаемое поведение. Проблемы возникают, когда в ячейке таблицы соседствуют ссылки и текст: таблица на устройствах с небольшим экраном выглядит вот таким уродливым образом (обратите внимание на запятые между ссылками):

Пример поломанной таблицы

Если ширина экрана ещё меньше, пользователю сайта содержимое ячейки не видно полностью:

Поломанная таблица на небольшом экране

4. MCVE

<!DOCTYPE html>
<html>
<head>
<title>KiraTitle</title>
<script src="https://cdn.jsdelivr.net/npm/cash-dom/dist/cash.min.js" defer></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jquery-responsive-tables/css/responsive-tables.min.css">
<script src="https://cdn.jsdelivr.net/npm/jquery-responsive-tables/js/jquery.responsive-tables.min.js" defer></script>
<script src="https://rawcdn.githack.com/Kristinita/Kristinita.github.io/735f1c5afe190482ec81218dfc755ca82e1a8706/theme/js/jquery-responsive-tables/jquery-responsive-tables.min.js" defer></script>
<style>
    table {
        width: 100%;
    }
    td,
    th {
        padding: 0.5rem;
    }
</style>
</head>
<body>
<table>
    <thead>
        <tr>
            <th>KiraFirstColumn</th>
            <th>KiraSecondColumn</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><a href="https://ru.stackoverflow.com/">Kira — the greatest of all time, KiraText</a></td>
            <td><a href="https://stackoverflow.com/">Kira — the greatest of all time</a>, KiraText</td>
        </tr>
    </tbody>
</table>
</body>
</html>

Так отображается MCVE на устройствах с небольшой шириной экрана:

MCVE behavior

Если текст полностью заключён в ссылку, то он нормально переносится на следующую строку. Когда же в ячейке есть ссылка и текст, перенос осуществляется не так, как хотелось бы.

5. Не помогло

5.1. Свойства flex

Сначала почитал общие руководства пo flexbox. Попробовал, например, flex-wrap: wrap:

flex-wrap

и flex-direction: column:

flex-direction

Читал о позиционировании flex элементов (flex items), пробовал свойства align-items, justify-content, но желаемого поведения получить не смог.

5.2. Манипуляции с flex контейнером

Последняя ячейка в таблице из MCVE представляет собой flex container:

Flex container

Гуглил на английском и русском:

  1. Можно ли кастомно переопределить автоматические назначенные flex-элементы контейнера?
  2. Возможно ли объединить (merge, combine) элементы в контейнере?
  3. Как устранить разрыв между flex-элементами, в моём случае <a> и #text?
  4. Возможно ли задать элементам внутри контейнера что-то вроде display: inline?

Ответов применительно к моему случаю не нашёл. В каком направлении копать дальше, пока не понимаю.

6. Комментарии к возможным ответам

  1. Да, я понимаю, что вместо flexbox можно использовать display: block или display: grid. Пожалуйста, не пишите про это, если не знаете, как можно получить описанное в разделе 1 желаемое поведение при помощи данных технологий.
  2. Решение, работающее для ячейки с каким-то конкретными параметрами, но не работающее для прочих ячеек со ссылками и текстом — не лучший вариант.
18
  • Ой-ой-ой, полегче с такими подробными вопросами :-) "... с большИм количеством строк..." или "с бОльшим количеством строк..." ? С миллионом строк и столбцов любому респонсиву поплохеет. Нужны бы более чёткие рамки.
    – UModeL
    7 янв 2021 в 13:28
  • @UModeL , здравствуйте, Юрий. я удалил вообще эту строку, поскольку она, по всей видимости, только сбивает. На практике у моих таблиц количество столбцов не больше 7 (7 — как на первой картинке); количество строк — не более 50. Таблицы с каким-то огромным количеством столбцов/строк использовать не планирую. Спасибо. 7 янв 2021 в 13:45
  • здравствуйте. Куча уточнений. 1. Таблица, флекс, микс? Скорее всего Вам нужно поведение аля "карточка товара", тогда флекс предпочтительней. 2. Если допустим JS и медиа-запросы, то задача вполне осуществима, я думаю.
    – UModeL
    7 янв 2021 в 13:53
  • @UModeL , Таблица, флекс, микс — См. п.2 — «Цель»; реализация может быть любая. Возможно, для простоты создания таблиц, желательно, если будет использована обычная разметка HTML-таблиц. // Если допустим JS и медиа-запросы, то задача вполне осуществима, я думаю. — да, конечно, это допустимо. В моём MCVE приведён пример JS-плагина с медиа-запросами, который делает всё, что мне нужно. Но не могу побороть описанную проблему с переносом flex-элементов. Спасибо. 7 янв 2021 в 14:06
  • 1
    @StepanKasyanenko , см. пример, как мои таблицы выглядят сейчас на устройствах с нешироким экраном (использую display:block). Вот 6-я строка, а вот 20-я. Строка на устройствах с небольшим экраном при помощи медиа-запросов превращается в столбец. // Желаемое поведение см. в изображении 2 из моего вопроса. Необходимо, чтобы к столбцу (тому самому, в который превращается строка) слева добавлялся ещё один столбец — данные из thead. // Сейчас правильно Вас понял? Спасибо. 8 янв 2021 в 12:57

2 ответа 2

3

Совсем забыл про этот вопрос. Скорее всего, задача уже решена, но может кто-то найдёт для себя что-то полезное разобравшись в коде:

let mediaQueryList = window.matchMedia("(max-width: 1000px), screen and (orientation: portrait)");

function fResizeCells(selector = "body", type = "reset") {
  let arr = [...document.querySelectorAll(selector)];
  let aRow = [...document.querySelectorAll(".good")];
  switch (type) {
    case "max":
      let nMax = Math.max(...arr.map((el) => el.clientWidth));
      arr.forEach((el) => (el.style.minWidth = `${nMax}px`));
      break;
    case "col":
      let nCol = aRow[0].children.length;
      for (let i = 0; i < nCol; i++) {
        let m = Math.max(...aRow.map((oRow) => oRow.children[i].clientWidth));
        aRow.forEach((oRow) => (oRow.children[i].style.minWidth = oRow.children[i].style.minWidth = `${m}px`));
      }
      break;
    default:
      arr.forEach((el) => (el.style.minWidth = el.style.maxWidth = ``));
      break;
  }
}

function screenTest(ev) {
  if (ev.matches) {
    fResizeCells(".char"); fResizeCells(".title", "max");
  } else {
    fResizeCells(".title"); fResizeCells(".char", "col");
  }
}
mediaQueryList.addListener(screenTest);
screenTest(mediaQueryList);
body { margin: 0; }

.table {
  margin: 0 auto;
  display: flex;
  flex-flow: column nowrap;
  padding: 5px;
  background-color: #f3efd6;
  color: #758e8b;
  font-family: sans-serif;
}

.good {
  display: flex;
  flex-flow: row nowrap;
  background-image: linear-gradient(#0002, #0000 10%, #0001 90%);
  box-shadow: 0 0 0 1px #758e8b;
}
.good:not(:last-child) { margin-bottom: 5px; }

.char {
  display: flex;
  flex-flow: column nowrap;
  box-shadow: inset 0 0 0 0px #758e8b;
}

.name {
  flex-basis: 50px;
  flex-grow: 2;
}

.author {
  flex-basis: 50px;
  flex-grow: 3;
}

.theme {
  flex-basis: 50px;
  flex-grow: 1;
}

.price-min {
  flex-basis: 50px;
  flex-grow: 2;
}

.title {
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  align-items: center;
  padding: 0.5em;
  min-height: 2.5em;
  font-weight: bold;
  text-align: center;
  box-shadow: inset 0 0 0 1px #758e8b;
}

.cont {
  display: flex;
  flex-flow: row wrap;
  justify-content: start;
  align-items: center;
  padding: 0.5em;
  flex: 1;
  box-shadow: inset 0 0 0 1px #758e8b;
}
.author .cont {
  flex-flow: column nowrap;
  justify-content: center;
  align-items: start;
}

.good p { margin: 0; }

.im {
  font-family: Georgia, "Times New Roman", Times, serif;
  font-weight: bold;
  font-style: italic;
  color: #b78670;
}

.nw {
  white-space: nowrap;
  text-align: center;
}

img {
  display: block;
  width: 192px;
  height: 260px;
  object-fit: none;
  object-position: -303px -122px;
  box-shadow: 0 0 25px 0px #0007;
}

@media (max-width: 1000px),
screen and (orientation: portrait) {
  .good {
    display: flex;
    flex-flow: column nowrap;
  }
  .char {
    display: flex;
    flex-flow: row nowrap;
    box-shadow: inset 0 0 0 1px #758e8b;
  }
  .name, .author, .theme, .price-min {
    flex-basis: auto;
    flex-grow: 0;
  }
  .title {
    justify-content: start;
    align-items: start;
    min-height: max-content;
    box-shadow: inset 0 0 0 0px #758e8b;
  }
  .price-min .title {
    text-align: left;
  }
  .cont {
    box-shadow: inset 0 0 0 0px #758e8b;
  }
  .author .cont {
    flex-flow: column nowrap;
    align-items: start;
  }
}
<div class="table">
  <div class="good">
    <div class="char number">
      <div class="title">
        <p>No.</p>
      </div>
      <div class="cont">
        <p class="nw">1999999</p>
      </div>
    </div>
    <div class="char name">
      <div class="title">Название</div>
      <div class="cont im">Вымершие животные</div>
    </div>
    <div class="char cover">
      <div class="title">Обложка</div>
      <div class="cont"><img alt="обложка" src="https://i.imgur.com/Mrx1U0z.png"></div>
    </div>
    <div class="char author">
      <div class="title">Автор</div>
      <div class="cont im">Дмитрий Лукашанец</div>
    </div>
    <div class="char theme">
      <div class="title">Тематика</div>
      <div class="cont">Как динозавры так и остальные</div>
    </div>
    <div class="char version">
      <div class="title">Версия</div>
      <div class="cont">
        <p class="nw">B</p>
      </div>
    </div>
    <div class="char price-min">
      <div class="title">Минимальная<br>цена</div>
      <div class="cont im">
        <p class="nw">999 800,50 RUB</p>
      </div>
    </div>
  </div>
  <div class="good">
    <div class="char number">
      <div class="title">No.</div>
      <div class="cont">
        <p class="nw">1999999</p>
      </div>
    </div>
    <div class="char name">
      <div class="title">Название</div>
      <div class="cont im">Вымершие животные</div>
    </div>
    <div class="char cover">
      <div class="title">Обложка</div>
      <div class="cont"><img alt="обложка" src="https://i.imgur.com/Mrx1U0z.png"></div>
    </div>
    <div class="char author">
      <div class="title">Автор</div>
      <div class="cont im">
        <p><a href="https://ru.stackoverflow.com/">Kira — the greatest of all time, KiraText</a></p>
        <p><a href="https://stackoverflow.com/">Kira — the greatest of all time</a>, KiraText</p>
      </div>
    </div>
    <div class="char theme">
      <div class="title">Тематика</div>
      <div class="cont">Как динозавры так и остальные</div>
    </div>
    <div class="char version">
      <div class="title">Версия</div>
      <div class="cont">
        <p class="nw">B</p>
      </div>
    </div>
    <div class="char price-min">
      <div class="title">Минимальная<br>цена</div>
      <div class="cont im">
        <p class="nw">800</p>
      </div>
    </div>
  </div>
</div>

0
1

Если я не совсем верно понимаю задачу, то, пожалуйста, поправьте. Почему бы не реализовать адаптивность таблицы только с помощью CSS и дополнительного атрибута? Вот пример:

table {
  border-collapse: collapse; padding: 5px;
  background-color: #f3efd6; color: #758e8b; font-family: sans-serif;
}

table th, table td {
  padding: 10px; border: 2px solid #758e8b;
}

table td:nth-child(2), table td:nth-child(4) {
  font-family: Georgia, "Times New Roman", Times, serif; font-weight: bold; font-style: italic; color: #b78670;
}

img {
  display: block; width: 192px; height: 260px; object-fit: none; object-position: -303px -122px; box-shadow: 0 0 25px 0px #0007;
}

@media screen and (max-width: 760px) {
  table thead {
    position: absolute; overflow: hidden; width: 0px; height: 0px;
  }
  table th {
    border: none;
  }
  table th, table td {
    border: 1px solid #758e8b;
  }
  table tr {
    display: grid; grid-template-columns: repeat(1, 1fr);
    margin: 5px 5px 10px 5px;
    border: 1px solid #758e8b; border-bottom: 2px solid #758e8b;
  }
  table td {
    display: grid; grid-template-columns: repeat(2, 1fr);
    text-align: left;
  }
  table td::before {
    content: attr(data)":";
    font-weight: bold; font-style: normal; color: #758e8b;
  }
  table td:last-child {
    border-bottom: 0;
  }
}
<table>
  <thead>
    <tr>
      <th>No.</th>
      <th>Название</th>
      <th>Обложка</th>
      <th>Автор</th>
      <th>Тематика</th>
      <th>Версия</th>
      <th>Минимальная цена</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td data="No.">1999999</td>
      <td data="Название">Вымершие животные</td>
      <td data="Обложка"><img alt="обложка" src="https://i.imgur.com/Mrx1U0z.png"></td>
      <td data="Автор">Дмитрий Лукашанец</td>
      <td data="Тематика">Как динозавры так и остальные</td>
      <td data="Версия">В</td>
      <td data="Минимальная цена">999 800,50 RUB</td>
    </tr>
    <tr>
      <td data="No.">1999999</td>
      <td data="Название">Вымершие животные</td>
      <td data="Обложка"><img alt="обложка" src="https://i.imgur.com/Mrx1U0z.png"></td>
      <td data="Автор">
        <p><a href="https://ru.stackoverflow.com/">Kira — the greatest of all time, KiraText</a><a href="https://stackoverflow.com/">Kira — the greatest of all time</a>, KiraText</p>
      </td>
      <td data="Тематика">Как динозавры так и остальные</td>
      <td data="Версия">В</td>
      <td data="Минимальная цена">800</td>
    </tr>
  </tbody>
</table>

3
  • 1
    Салам, смотрю с мобилы и выглядит так же как и у UModeL ...в общем красиво, ... 13 мар 2021 в 13:53
  • я всегда хотел знать, кем ты работаешь? 13 мар 2021 в 14:00
  • да я смотрел вакансии, увидел одну и единственным требованием было отличное знание jQuery и ajax, про тебя вспомнил, ты же все на jQuery делаешь 13 мар 2021 в 14:05

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

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