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 на устройствах с небольшой шириной экрана:
Если текст полностью заключён в ссылку, то он нормально переносится на следующую строку. Когда же в ячейке есть ссылка и текст, перенос осуществляется не так, как хотелось бы.
5. Не помогло
5.1. Свойства flex
Сначала почитал общие руководства пo flexbox. Попробовал, например, flex-wrap: wrap
:
и flex-direction: column
:
Читал о позиционировании flex элементов (flex items), пробовал свойства align-items
, justify-content
, но желаемого поведения получить не смог.
5.2. Манипуляции с flex контейнером
Последняя ячейка в таблице из MCVE представляет собой flex container:
Гуглил на английском и русском:
- Можно ли кастомно переопределить автоматические назначенные flex-элементы контейнера?
- Возможно ли объединить (merge, combine) элементы в контейнере?
- Как устранить разрыв между flex-элементами, в моём случае
<a>
и#text
? - Возможно ли задать элементам внутри контейнера что-то вроде
display: inline
?
Ответов применительно к моему случаю не нашёл. В каком направлении копать дальше, пока не понимаю.
6. Комментарии к возможным ответам
- Да, я понимаю, что вместо flexbox можно использовать
display: block
илиdisplay: grid
. Пожалуйста, не пишите про это, если не знаете, как можно получить описанное в разделе 1 желаемое поведение при помощи данных технологий. - Решение, работающее для ячейки с каким-то конкретными параметрами, но не работающее для прочих ячеек со ссылками и текстом — не лучший вариант.