Сжать таблицу, если она отображается не полностью - PullRequest
Новая
       19

Сжать таблицу, если она отображается не полностью

0 голосов
/ 10 мая 2018

1. Резюме

Не понимаю, как мне сжать стол, если он действительно нужен:

, если таблица не отображается полностью и появляется горизонтальная полоса прокрутки .

2. Ограничение

У меня есть статический сайт. Было бы неплохо, чтобы любые решения для JavaScript включали JQuery, Bootstrap или другие библиотеки; но не решения для динамических сайтов.

3. Пример

Таблица по Repl.it:

index.html 

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8"/>
        <title>
            Document
        </title>
        <script src="//cdn.jsdelivr.net/npm/jquery@3.3.1/dist/jquery.min.js" defer></script>
        <!-- https://fooplugins.com/footable-jquery/documentation/ -->
        <!-- http://fooplugins.github.io/FooTable/docs/examples/basic/single-header.html -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-footable/3.1.6/footable.min.js" defer></script>
        <script src="footable.js" defer></script>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-footable/3.1.6/footable.core.standalone.min.css"/>
    </head>
    <body>
        <div class="justtable">
            <table class="table">
                <thead>
                    <tr>
                        <th>
                            No.
                        </th>
                        <th data-breakpoints="x-small">
                            Name
                        </th>
                        <th data-breakpoints="x-small">
                            Town
                        </th>
                        <th data-breakpoints="x-small">
                            Quality of work
                        </th>
                        <th data-breakpoints="x-small">
                            Characteristics
                        </th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>
                            1
                        </td>
                        <td>
                            Kira
                        </td>
                        <td>
                            Velikiy Novgorod
                        </td>
                        <td>
                            Great
                        </td>
                        <td>
                            You're one in a million, You're once in a lifetime, You made me discover one of the stars above us, You're one in a million
                        </td>
                    </tr>
                    <tr>
                        <td>
                            2
                        </td>
                        <td>
                            Sasha
                        </td>
                        <td>
                            Kazan
                        </td>
                        <td>
                            Amazing
                        </td>
                        <td>
                            Sometimes, Love can hit You everyday, Sometimes, You can fall for everyone you see, But only One can really make me stay, The sign, the one in the sky, has said to me
                        </td>
                    </tr>
                    <tr>
                        <td>
                            3
                        </td>
                        <td>
                            Nervov
                        </td>
                        <td>
                            Saint-Petersburg
                        </td>
                        <td>
                            Beautiful
                        </td>
                        <td>
                            I always will remember how I felt that day, A feeling indescribable to me, yeah, I always knew there was an answer for my prayer, And You, You're the One, the One for me
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </body>
</html>

footable.js: 

jQuery(function($) {
    $('.table').footable({
        "breakpoints": {
            "x-small": 200,
            "small": 300
        }
    });
});

4. Подробнее

  1. У меня есть таблица:

    Non-expanded

  2. Я открываю таблицу на мобильном устройстве с небольшим экраном → не все таблицы отображаются, я вижу горизонтальную полосу прокрутки:

    Horizontal scrollbar

  3. Но некоторые плагины могут уменьшить таблицу для маленьких экранов:

    Responsive

5. Алгоритм адаптивных плагинов

Для точка останова == 800px:

если размер экрана> точка останова

стол без усадки

еще

стол термоусадочный

5,1. Задача алгоритма плагинов

Если небольшое значение точки останова:

не все таблицы отображаются как в пункте 4.2 этого вопроса.

иначе большое значение точки останова:

маленькие столы сжимаются на больших экранах. Это неудобно для пользователей.

6. Ожидаемое поведение

Если отображение полной таблицы на экране:

стол не термоусадочный

иначе не полное отображение таблицы, как в пункте 4.2 этого вопроса:

стол термоусадочный

Могу ли я получить подобное поведение?

7. Не помогло

7,1. table-layout: fixed

Как и в этот ответ : 

table {
    table-layout: fixed;
}

Поведение на маленьких экранах:

Small screens

Проблемы

  1. Слова выходят за рамки клетки и экрана
  2. Размер маленьких клеток

7,2. Плагины как FooTable

Я пробую несколько плагинов для создания адаптивных таблиц. Я получаю поведение как в пункте 5.1.1 этого ответа. Исправлена ​​точка останова px, используемая в этих плагинах:

7,3. Плагины как DataTable

Я пробую некоторые плагины, которые скрывают, не сжимают на маленьких экранах данные таблиц.

Пример:

Для Демонстрация шаблонов RWD-таблиц :

  • Большой экран - 8 строк:

RWD-Big-screen-table

  • Маленький экран - 2 строки отображаются полностью, 1 - частично:

RWD-Small-screen-table

У меня есть такое поведение для этих плагинов:

8. Не предлагать

  1. Да, я знаю о overflow-x: auto. Это не совсем по теме этого вопроса.
...