值得庆幸的是，值得尊敬的HTML表在页面布局方面可能会长期失效。但它的初衷仍然很强：显示表格数据。它们仍然非常有用，并且已经通过CSS和jQuery等得到了进一步的增强。
不过，在移动屏幕上，大型桌子并不总是一种很好的体验。如果处理不当，列就会被切断，因此无法读取。这只是一个可怜的UX。
谢天谢地，我们潍坊专业建站可以使用一些技术使表在移动设备上更加友好。让我们探索一下我们可以采取的几种方法，以确保每个屏幕上的数据都是可访问的。我们还将提供一个工作示例，以便您可以看到它的实际操作。
水平滚动
这是一种非常简单的方式，让移动用户可以访问非常宽的桌子。属性添加容器元素。overflow-x属性设置为auto将允许在小屏幕上水平滚动。不一定是最优雅的做事方式，但至少内容是可访问的。特别感谢W3学校为了这个概念。
带有重新定位表头的可折叠单元格
这种方法比滚动更方便用户，尽管设置起来更困难。在移动屏幕上，每个td单元格显示为block把它们堆放在一起。然后，对data-th属性和:beforeCSS选择器，表标题基本上从上一行移到左边。
下面是关于这个选项的一个稍微不同的观点。而不是使用data-th属性，表标题项是通过css定义的。content财产。虽然效果本质上是一样的，但是维护代码的要求是不同的。对于不包含多个表的较小站点，此解决方案可能更好。
带有水平滚动的静态左表头
这里我们看到一个表头(thead)设置为float:left通过CSS保持静态定位在小屏幕上。数据行被转换成列，形成一个组织良好的表。使用一些JavaScript将表头保持与其他单元格相同的高度和对齐方式。
元素查询
元素查询的重点是特定元素的大小要求，而不仅仅是浏览器窗口的维度。它们现在是实验性的，但是你可以在下面读到更多关于它们的信息。EQCSS(它还提供了一个可供使用的JS库)。在下表示例中，td单元格排列在不同的列布局中。整个过程基于表元素的宽度。这绝对是一种有趣的技术，值得关注。
数据表jQuery插件
这个数据表jQuery插件为标准HTML表添加了各种有用的功能。及其响应性超能力是相当惊人的。脚本将根据屏幕大小自动隐藏列。隐藏的数据可用点击(或触摸)查看。您还可以灵活地优先处理特定的列。下面的示例显示了响应表的所有荣耀。
选择最佳技术
上面的技术实际上只是开发人员如何处理响应表的一个小样本。它们从极其简单到复杂，依赖脚本的混合物。
当涉及到为您的项目选择正确的解决方案时，它实际上可以归结为以下几个因素：
- 考虑您将要创建的表的大小以及它们将包含的数据类型。
- 确定您满意的依赖项。
- 考虑一下自动化整个过程的潜力。
如果您正在构建一个只包含一两个表的相对较小的网站，那么未来的维护可能不是什么大问题。但是对于更大的站点，当添加新表和更改现有表时，您会想出保持一切顺利运行的方法。
例如，使用从data属性可以非常有效，但也可能很难维护。如果非设计人员负责添加内容，情况尤其如此。在这种情况下，尝试并自动化创建的过程是值得的。data属性通过PHP或其他代码。这样，负责内容的人就不必担心处理代码了。
表对潍坊设计师来说是一个独特的挑战。在移动网络出现之前很久，人们就开始想象它们了。但是只要有一点创造力，你就可以建立一个很好的用户体验--即使是在最小的屏幕上。
