如何使用CSS创建响应表

本文概述

• 使用纯CSS创建响应表
• 使用CSS和JS创建响应表
• 其他技巧

数据表是(并且可能永远)成为HTML文档中可视化某些信息的重要部分。对于某些用户而言, 重要的不仅是表中的信息, 还有阅读时的体验。

如果你已经尝试过使大型数据表与响应式设计一起工作, 那么你将知道它的痛苦, 因此, 在本文中, 你将学习如何使用纯CSS甚至是JS的出色实现来创建响应式表。

使用纯CSS创建响应表

为了使一个表响应表, 我们将不集中在表本身上, 而是集中在包含我们表的div上。在这种情况下, 我们将使用媒体查询根据屏幕尺寸来修改类(.table-sensitive)。具有.table-response类的元素在x轴的溢出中需要具有auto作为值。通过使用媒体查询, 我们将对div应用100％的宽度以使其响应。

.table-responsive {
    min-height: .01%;
    overflow-x: auto;
}

@media screen and (max-width: 767px) {
    .table-responsive {
        width: 100%;
        margin-bottom: 15px;
        overflow-y: hidden;
        -ms-overflow-style: -ms-autohiding-scrollbar;
        border: 1px solid #ddd;
    }
    .table-responsive > .table {
        margin-bottom: 0;
    }
    .table-responsive > .table > thead > tr > th, .table-responsive > .table > tbody > tr > th, .table-responsive > .table > tfoot > tr > th, .table-responsive > .table > thead > tr > td, .table-responsive > .table > tbody > tr > td, .table-responsive > .table > tfoot > tr > td {
        white-space: nowrap;
    }
}

然后, 你只需要在表格中使用表响应类将div的表独立于大小而包装即可, 如以下示例所示：

<!-- Don't forget to wrap you table inside a div with the table-responsive class -->
<div class="table-responsive">
    <table>
        <thead>
            <tr>
                <th>#</th>
                <th>Field 1</th>
                <th>Field 2</th>
                <th>Field 3</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>Value 1</td>
                <td>Value 2</td>
                <td>Value 3</td>
            </tr>
            <tr>
                <td>2</td>
                <td>Value 1</td>
                <td>Value 2</td>
                <td>Value 3</td>
            </tr>
            <tr>
                <td>3</td>
                <td>Value 1</td>
                <td>Value 2</td>
                <td>Value 3</td>
            </tr>
        </tbody>
    </table>
</div>

但是, 请注意, 表的宽度(在不需要响应类的屏幕上)将由表数据定义, 因此, 如果表较小, 则可以通过将宽度设置为100％来设置”响应性更强”的表与CSS：

<div class="table-responsive">
    <table style="width:100%;">
        <!-- Some content -->
    </table>
</div>

或通过创建一个名为table的类使此属性更明显：

<style>
    /*Or in an external CSS file*/
    .table{
        width:100%;
    }
</style>
<div class="table-responsive">
    <table class="table">
        <!-- Some content -->
    </table>
</div>

使用CSS和JS创建响应表

如果你也想创建使用Javascript的功能最强大的响应表, 那么我们为你提供了一个有趣的解决方案, 以防你能够使用JS。我们正在谈论响应表.js, 这种简单的JS / CSS组合将使你的表适应小型设备屏幕。

注意：仅当第一列是表的键时, 此插件才有用, 并且不仅将始终显示作为第一列的标题, 而且其他内容在小型设备上也可滚动。

怎么运行的

如果你对某些表设计进行分析, 你会发现大多数时候, 第一列是表的唯一键。这提供了其他列的参考, 而列标题提供了所有含义的图例。考虑到这一点, 该插件使我们的响应表始终具有第一列。

首先, 在文档中包含所需的js和css文件(请访问插件的主页或Github中的官方存储库)：

<!-- Add the styles -->
<link href="responsive-tables.css" type="text/css" media="screen" rel="stylesheet"/>
<!-- Add the JS plugin -->
<script type="text/javascript" src="responsive-tables.js"></script>

然后, 与仅使用CSS的第一个示例不同, 要使用此插件使表具有响应性, 你需要向表中添加响应性类：

<table class="responsive">
    <!-- Information -->
</table>

带有响应类的Javascript初始化将自动应用于所有表, 当窗口小于常规平板电脑(因此, 大多数智能手机或超小型平板电脑)较小时, 将在客户端对表进行修改。

其他技巧

隐藏不相关的信息

如果你有一个包含大量数据的表, 并且希望使其在小屏幕设备上可读, 则可以实现许多其他解决方案, 例如, 通过添加一个简单的类来隐藏一些不相关的字段, 该类会以低分辨率隐藏该字段设备, 例如：

/* This media query will hide the fields in devices with a resolution of 320px*/
@media screen and (max-width: 320px) {
    .hide-on-mobile {
         display: none; 
     }
}

移动隐藏类将在屏幕分辨率低于320px的设备上隐藏具有指定类的元素。所以现在, 我们的表将如下所示：

<!-- Don't forget to wrap you table inside a div with the table-responsive class -->
<div class="table-responsive">
    <table>
        <thead>
            <tr>
                <th class="hide-on-mobile">#</th>
                <th>Field 1</th>
                <th>Field 2</th>
                <th>Field 3</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td class="hide-on-mobile">1</td>
                <td>Value 1</td>
                <td>Value 2</td>
                <td>Value 3</td>
            </tr>
            <tr>
                <td class="hide-on-mobile">2</td>
                <td>Value 1</td>
                <td>Value 2</td>
                <td>Value 3</td>
            </tr>
            <tr>
                <td class="hide-on-mobile">3</td>
                <td>Value 1</td>
                <td>Value 2</td>
                <td>Value 3</td>
            </tr>
        </tbody>
    </table>
</div>

显示图表而不是表格

如果要获得最佳的用户体验, 则可能需要将小型设备上的任何表转换为图表。几乎所有的图表插件都可以在移动设备和小屏幕上工作, 提供响应支持。

你可以使用HighchartTablePlugin或Chartinator之类的已知插件。

玩得开心 ！