Html таблица адаптивная: Адаптивные таблицы в вебе / Хабр

Leave a Comment / Html / By /

Содержание

javascript — Адаптивная таблица с HTML-тегами в ячейках

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:

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

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

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

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

  1. Да, я понимаю, что вместо flexbox можно использовать display: block или display: grid. Пожалуйста, не пишите про это, если не знаете, как можно получить описанное в разделе 1 желаемое поведение при помощи данных технологий.
  2. Решение, работающее для ячейки с каким-то конкретными параметрами, но не работающее для прочих ячеек со ссылками и текстом — не лучший вариант.

Делаем простые адаптивные таблицы на минимальном CSS

Сложно представить сайт без таблиц. Существует вагон и маленькая тележка способов реализации адаптивного вывода таблиц. Можно использовать готовые фреймворки, разную экзотику на JS, но разумнее всего делать таблицы на CSS. На нем и рассмотрим парочку боевых примеров.

Сразу отмечу, решение не мое, а известного канадского веб-разработчика Брэдли Таунта.

1. Разрешить скроллинг таблиц

Первый способ заключается в разрешении горизонтального скролла. Да, решение не самое элегантное, но иногда вывести многоколоночную таблицу удается только так и с этим приходится мириться.

Просто задаем минимальную ширину родительского элемента таблицы, и браузер потребует от пользователя прокручивать содержимое по горизонтали.

table {
    min-width: 800px; /* Set your desired min-width here */
}

Получится так:

See the Pen Простые адаптивные таблицы на минимальном CSS — 1 by Ivan (@DanilinBiz) on CodePen.

Многие этим и ограничиваются, но можно пойти дальше.

2. Добавить гибкости

В основе решения лежат флексбоксы со всеми вытекающими приятными последствиями.

/* Using 800px as mobile screen in this example */
@media(max-width: 800px) {
    /* Hide the table headings */
    table thead {
        left: -9999px;
        position: absolute;
        visibility: hidden;
    }
    table tr {
        border-bottom: 0;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        margin-bottom: 40px;
    }
    table td {
        border: 1px solid;
        margin: 0 -1px -1px 0; /* Removes double-borders */
        width: 50%;
    }
}

На выходе получаем такое:

See the Pen Простые адаптивные таблицы на минимальном CSS — 2 by Ivan (@DanilinBiz) on CodePen.

В примере выше заголовки таблицы скрыты, чтобы не засорять ее. Но мы можем вывести и их. Например, так:

/* Default span styling - hidden on desktop */
table td span {
    background: #eee;
    color: dimgrey;
    display: none;
    font-size: 10px;
    font-weight: bold;
    padding: 5px;
    position: absolute;
    text-transform: uppercase;
    top: 0;
    left: 0;
}
/* Simple CSS for flexbox table on mobile */
@media(max-width: 800px) {
    table thead {
        left: -9999px;
        position: absolute;
        visibility: hidden;
    }
    table tr {
        border-bottom: 0;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        margin-bottom: 40px;
    }
    table td {
        border: 1px solid;
        margin: 0 -1px -1px 0;
        padding-top: 35px; /* additional padding to avoid heading overlap */
        position: relative;
        width: 50%;
    }
    /* Show the heading span */
    table td span {
        display: block;
    }
}

See the Pen Простые адаптивные таблицы на минимальном CSS — 3 by Ivan (@DanilinBiz) on CodePen.

Как видим, способы сильно отличаются. И здесь важно понимать в контексте конкретного проекта, что использовать: молоток или отвертку.

Адаптивная таблица CSS

❮ Предыдущая Далее ❯

Адаптивная таблица

Адаптивная таблица будет отображать горизонтальную полосу прокрутки, если экран слишком small для отображения всего содержимого:

Имя Фамилия Очки Очки Очки Очки Очки Очки Очки Очки Очки Очки Очки Очки
Джилл Смит 50 50 50 50 50 50 50 50 50 50 50 50
Ева Джексон 94 94 94 94 94 94 94 94 94 94 94 94
Адам Джонсон 67 67 67 67 67 67 67 67 67 67 67 67

Добавьте элемент контейнера (например,

) с overflow-x:auto вокруг элемента, чтобы сделать его отзывчивым:

Пример


. .. содержимое таблицы …

Попробуйте сами »

Примечание: В OS X Lion (на Mac) полосы прокрутки по умолчанию скрыты и отображаются только при использовании (даже если установлено «overflow:scroll»).

Дополнительные примеры

Создание необычного стола
В этом примере показано, как создать необычный стол.

Установите положение заголовка таблицы
В этом примере показано, как расположить заголовок таблицы.

Проверьте себя с помощью упражнений

Упражнение:

Установите границу на «2px сплошной зеленый» для элементов table, th и td.

<стиль>
 {
  : 2 пикселя сплошного зеленого цвета;
}

<тело>
<таблица>
  
    Имя
    Фамилия
  
  
    Питер
    Гриффин
  
  
    Лоис
    Гриффин

Начать упражнение

Свойства таблицы CSS

Свойство Описание
граница Задает все свойства границы в одном объявлении
обрушение границы Указывает, должны ли быть свернуты границы таблицы
интервал между границами Задает расстояние между границами соседних ячеек
со стороны надписи Задает размещение заголовка таблицы
пустые ячейки Указывает, отображать ли границы и фон пустых ячеек в таблице.
макет таблицы Устанавливает алгоритм компоновки, который будет использоваться для таблицы

❮ Предыдущий Следующий ❯


ВЫБОР ЦВЕТА

Лучшие учебники
Учебник по HTML
Учебник CSS
Учебник JavaScript
Учебник How To
Учебник SQL
Учебник Python
Учебник W3.CSS
Учебник Bootstrap
Учебник PHP
Учебник Java
Учебник C++
Учебник jQuery

2 Top 9 Справочник по HTML
Справочник по CSS
Справочник по JavaScript
Справочник по SQL
Справочник по Python
Справочник по W3.CSS
Справочник по Bootstrap
Справочник по PHP
Цвета HTML
Справочник по Java
Справочник по Angular
Справочник по jQuery

Основные примеры
Примеры HTML
Примеры CSS
Примеры JavaScript
Примеры инструкций
Примеры SQL
Примеры Python
Примеры W3. CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery

FORUM | О

W3Schools оптимизирован для обучения и обучения. Примеры могут быть упрощены для улучшения чтения и обучения. Учебники, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего содержания. Используя W3Schools, вы соглашаетесь прочитать и принять наши условия использования, куки-файлы и политика конфиденциальности.

Copyright 1999-2022 Refsnes Data. Все права защищены.

W3Schools работает на основе W3.CSS.

10 лучших подключаемых модулей адаптивных таблиц на JavaScript и CSS (обновление 2022 г.)

Исследование показывает, что число пользователей смартфонов во всем мире сегодня превышает три миллиарда и, по прогнозам, в ближайшие несколько лет вырастет еще на несколько сотен миллионов.

В 2020 году количество уникальных пользователей мобильного интернета составило 4,28 миллиарда, что указывает на то, что более 90 процентов населения мира используют мобильное устройство для выхода в интернет. Вот почему Google преимущественно использует мобильную версию контента для индексации и ранжирования.

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

Чтобы решить эту проблему, вам может понадобиться третье решение JavaScript или дополнительные стили CSS, чтобы улучшить представление таблицы на мобильных устройствах.

Вот список из 10 лучших решений JavaScript и Pure CSS, которые сделают вашу HTML-таблицу полностью адаптивной и удобочитаемой на мобильных устройствах и планшетах. Не стесняйтесь загружать и использовать их в своем следующем современном веб-дизайне, чтобы улучшить работу с существующими таблицами HTML.

Первоначально опубликовано 09 июля 2020 г. , обновлено 12 марта 2022 г.

  • Адаптивные плагины Vanilla JS
  • Решения для адаптивных таблиц Pure CSS

    • Подключаемые модули jQuery Responsive Table

    Подключаемый модуль Basic Responsive Table для jQuery — Basic Table

    Basic Table — это сверхлегкий подключаемый модуль jQuery для создания чувствительных, читаемых на мобильных устройствах таблиц данных с использованием метода JS resize() и медиазапросов CSS3.

    [Демонстрация] [Скачать]

    FooTable — jQuery адаптивный HTML-плагин для таблиц

    FooTable — это jQuery-плагин, который заставляет HTML-таблицы на небольших устройствах выглядеть потрясающе, не нарушая функциональности и дизайна. Этот плагин скрывает определенные столбцы данных в разных разрешениях, а строки становятся расширяемыми, чтобы показать d

    [Демо] [Скачать]

    Сделать HTML-таблицу отзывчивой на всех устройствах — jQuery table-shrinker

    table-shrinker — это решение для адаптивных таблиц на основе jQuery, которое делает широкие/большие HTML-таблицы полностью адаптивными на всех устройствах/платформах.

    [Демо] [Скачать]

    Плагин динамических мобильных адаптивных таблиц — RWD Reflow Table

    RWD Reflow Table — динамический, гибкий, отзывчивый плагин jQuery для таблиц, разработанный для кросс-платформенного табличного представления данных.

    [Демо] [Скачать]

    Адаптивное табличное решение для jQuery — TableCards.js

    Решение для адаптивных таблиц на основе jQuery, позволяющее сделать ваши широкие HTML-таблицы удобными для мобильных устройств.

    [Демо] [Скачать]

    Адаптивные плагины Vanilla JS

    Pure JavaScript Responsive Table Solution — responsive-tables.js в двухколоночную адаптивную таблицу на небольших экранах, таких как мобильные устройства. Совместимость с таблицами Bootstrap.

    [Демо] [Скачать]

    Решения для адаптивных таблиц на чистом CSS

    Адаптивная таблица на чистом CSS для мобильных устройств

    Еще одно решение для адаптивных таблиц на чистом CSS, которое преобразует обычную HTML-таблицу в несколько отдельных таблиц в мобильном представлении.

    [Демонстрация] [Скачать]

    Решение для отзывчивых таблиц на чистом HTML5/CSS3

    Решение на чистом HTML5/CSS3, позволяющее сделать вашу HTML-таблицу более читаемой на маленьких экранах без использования JavaScript.

    [Демо] [Скачать]

    Pure CSS Responsive HTML Table

    Еще одно решение для адаптивной таблицы CSS, преобразующее обычную широкую HTML-таблицу в сгруппированные блоки на мобильных устройствах.

    [Демонстрация] [Скачать]

    Адаптивная таблица на чистом CSS

    Минималистское решение на чистом CSS для создания адаптивной таблицы, удобной для мобильных устройств, которая использует медиа-запросы CSS, чтобы сделать ячейки таблицы полной ширины на небольших устройствах.

    [Демо] [Скачать]

    Заключение:

    Ищете другие решения JavaScript и CSS для создания адаптивных HTML-таблиц в Интернете и на мобильных устройствах? Дополнительные сведения см.

    Добавить комментарий

    Ваш адрес email не будет опубликован. Обязательные поля помечены *