主要外卖
- Elementor响应式表在手机上使用三种模式之一:堆叠成卡片的行、表自己的框内的侧向滚动或更少的列。
- 5列表需要大约640px的宽度才能保持可读性,而且大多数手机显示在360px到430px之间,因此除非您选择图案,否则宽表会溢出。
- Master Addons 动态表小部件在响应式表时将每行堆叠到宽度高达 768px 的设备上的卡中?已打开,这是默认值。
- 水平滚动需要两个 CSS 规则:溢出 x 设置为在包装纸上自动,并在包装纸内的桌子上设置最小宽度。
- TablePress 在每个表的设置中都有一个水平滚动复选框,默认情况下它已关闭。
Elementor响应式表是在手机上保持可读性的表,而表本身并不这样做,列需要比手机更大的宽度,因此表通常会从屏幕右侧戳出。
3种处理方法,我们把这3种都建在Elementor 4.3上,在390px宽的手机屏幕上检查了一下。
目录
为什么移动设备上的桌子会坏
Elementor 容器一排所能包裹的列,一张表都不能像其他列一样包裹它的列,每一列都要坐在其他列旁边,每一列都需要有其最长单词的空间,我们的五列出货表舒适,大约在 640px 左右,在 390px 的手机上,浏览器会挤压列,直到单词堆叠三行深,然后最后一列从边缘掉下来。
Elementor自己的响应控件在这里没有多大帮助,你可以隐藏每个设备的整个小部件或改变它的宽度,但你无法到达表内部并重新排列它的单元格。
三种响应式表模式
每种模式都有成本。
| 图案 | 访客所看到的 | 最好的 | 成本 |
|---|---|---|---|
| 将行堆叠成卡片 | 每行一张卡片,左侧贴有标签 | 行一次读取一个:时间表、规格表、价目表 | 很难跨行比较一列 |
| 水平滚动 | 正常的桌子,侧滑 | 比较一列中的值 | 列保持隐藏状态,直到访客刷卡 |
| 隐藏列 | 带有关键列的较短表格 | 具有一列或两列可选列的表格 | 电话访客丢失了该数据 |
模式 1:将行堆叠成卡片
Stacking 把每一行变成一张小卡片,头行消失,每个单元格都显示其列名作为标签,没有隐藏任何东西,也没有人横向滚动,所以是最安全的默认值。
的 动态表 widget 使用一个开关即可完成此操作。
- 在 Elementor 中选择动态表小部件。
- 在"内容"选项卡中,打开 设置.
- 离开 响应表? 设置为是。默认情况下它已打开。
- 在手机上打开页面。在宽度高达 768px 的设备上行堆叠。
Stacking规则检查设备宽度,所以缩小桌面浏览器窗口不会触发。在真实手机上或通过设备模拟进行测试。如果在Style选项卡中设置大单元格填充,请检查标签和值在手机上是否坐得太近。
想要一张没有 CSS 的堆叠表吗? 的 动态表小部件 从一开始就打开响应表开关。
图案2:水平卷轴
Horizontal scroll保持表格原样,让访客在自己的盒子里侧向滑动,页面本身不横向滚动,当人们需要向下读一列时使用,比如比较价格。
Elementor 的 HTML 小部件中的 HTML 表, 请将表用 div 包裹起来, 并添加两个规则:
<div class="table-scroll">
<table class="wide-table">
...
</table>
</div>
<style>
.table-scroll { overflow-x: auto; }
.table-scroll table { min-width: 640px; }
</style>的 min-width 阻止浏览器粉碎列,并且 overflow-x: auto 仅当屏幕比屏幕窄时才添加滚动。将 640px 更改为您的表需要保持在每个单元格一行的宽度。
弱点是没有什么可以告诉访问者右边还有更多内容。像屏幕截图中那样,对半切割的列是您可以给出的最佳提示,因此请勿将最小宽度设置为精确结束于列边缘的值。
模式 3:隐藏列
有时,桌面上的列很好,手机上也没必要。将其隐藏在断点下方,表格可能适合,无需任何其他更改。
为每个添加一个类 th 並 td 在您可能丢失的列中,然后在小屏幕上隐藏该类:
<th class="hide-mobile">Delivery time</th>
...
<td class="hide-mobile">2 to 3 working days</td>
<style>
@media (max-width: 767px) {
.hide-cols .hide-mobile { display: none; }
}
</style>在这里 hide-cols 是表本身上的类,767px是elementor默认的移动断点,所以列在平板电脑上又回来了。
只隐藏手机访问者可以没有的,如果隐藏的列决定是否有人购买,则使用堆叠或滚动。
Elementor 中的响应式 TablePress 表
Elementor 中放置的 TablePress 表格的行为与其他表相同:宽表溢出。修复程序保留在 TablePress 设置中。
- 去 桌面压机 并编辑表格。
- 滚动到 面向网站访问者的表格功能.
- 蜱 水平滚动。默认关闭。
- 单击 保存更改.
在我们的测试中,这修复了溢出:表格在其框内滚动,页面保持静止。 TablePress 还具有手机的堆叠和折叠模式,这些是其付费响应式表格功能的一部分。
快速移动清单
- 在真正的手机上打开页面。模拟器错过了触摸滚动和一些设备宽度规则。
- 横向滚动页面,如果整个页面移动,则表溢出。
- 保持标题文本简短。 “免费超”的包装比“免费订单超”的交货更好。
- Zui重要的列放在第一位,是表格滚动时保持可见的列。
- 16px的单元格中的正文为目标,缩小字体以适合表格,使其无法阅读。
常见问题
如何使表在 Elementor 中响应?
3种模式中选择一种,将行堆叠成带有支持它的表小部件的卡片,例如动态表,将一个HTML表用一个带有溢出-x的div包裹起来设置为自动,这样它就可以横向滚动。或者用CSS媒体查询隐藏767px以下的可选列。
为什么我的 Elementor 表在移动设备上被切断?
表格比屏幕宽,没有任何东西告诉它如何适应。表格无法包裹列,因此额外的宽度会溢出边缘。添加滚动包装纸,打开表格小部件中的堆叠选项,或删除小屏幕上的列。
我可以在 Elementor 中水平滚动表格吗?
Yes。HTML 表格,将其放在带有溢出-x:auto 的 div 内,并给表一个最小宽度,例如 640px。TablePress 表格,请在该表的设置中为站点访问者勾选表功能下的水平滚动。
Elementor 有响应式表小部件吗?
Elementor在核心插件或Pro中根本没有表小部件。Elementor中的响应式表来自附加小部件、表插件(例如TablePress)或具有您自己的CSS的HTML表。
堆叠和滚动在移动设备上哪个好?
堆(stacking)在每一行单独站立时更好,比如时间表中的一个类,当访客将数字向下比较一列时,滚动更好,因为堆叠的卡片将这些数字相距很远。
最后的想法
Elementor响应表,从中决定手机访问者需要什么,单独读取每一行时堆叠行,比较列时滚动,只有数据可选时才隐藏列。
CSS,如果你宁愿不写的话, 动态表 从面板中的开关处理堆叠模式。
相关阅读
