收缩表，如果没有完全显示

时间：2018-05-10 13:34:01

标签： javascript css html-table responsive-design footable

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

    4. 5。响应式插件算法

    对于断点== 800px：

    如果屏幕尺寸＆gt;断点

    表不缩小

    否则：

    表缩小

    5.1。插件算法问题

    如果小断点值：

    并非所有表格都显示在此问题的4.2项中。

    其他大断点值：

    小桌子缩小了大屏幕。这对用户来说很不方便。

    6。预期的行为

    如果屏幕上显示全表：

    表不缩小

    其他不是完整的表格显示，如此问题的4.2项：

    表缩小

    我可以得到类似的行为吗？

    7。没帮忙

    7.1。 table-layout: fixed

    与this answer中一样：

    table {
    table-layout: fixed;
}

    小屏幕上的行为：

    Small screens

    问题：

    1. 单词超越了细胞和屏幕
    2. 小细胞大小

      3. 7.2。插件为FooTable

      我尝试了一些用于响应表创建的插件。我得到了这个答案的5.1.1项中的行为。修复了这些插件中使用的px断点：

      7.3。插件为DataTable

      我尝试了一些隐藏的插件，而不是缩小表格的小屏幕数据。

      示例：

      RWD-Table-Patterns demo：

      • 大屏幕 - 8行：

      RWD-Big-screen-table

      • 小屏幕 - 2行完全显示，1 - 部分显示：

      RWD-Small-screen-table

      我对这些插件有这种行为：

      8。不提供

      1. 是的，我知道overflow-x: auto。这不完全是关于这个问题的主题。

0 个答案:

没有答案
相关问题
最新问题