如何使用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="http://www.srcmini.com/responsive-tables.css" type="text/css" media="screen" rel="stylesheet"/> < !-- Add the JS plugin --> < script type="text/javascript" src="http://www.srcmini.com/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>

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