wordpress建站效果不用多说,用过的都了说好。但是wordpress建站再好还是难免有一些小问题,比如对很多强迫症来说,wordpress自带表格不能自响应这个问题就比较折磨人。
默认情况下wordpress自带的表样不能自适应,或者是只能实现部分自适应,主要是有些比较复杂、内容多的表格在手机端显示不能自适应屏幕,往往需要手动左右滑动才能查看完全。其实可能是wordpress官方为了表格显示效果而故意这么做的,因为有些表格确实不太适合自适应。
悦然企业网站建设建议大家直接可以直接使用默认的表格,不用在意这个小问题(这也不算问题,这样的显示方式主要是为了手机端表格内容的显示完整),如果你一定要让表格自适应的话,这里给大家分享两个方法。
方法一
我们可以直接使用表格代码来实现自适应效果,代码如下:
<h3>调整自适应表格</h3>
<div class="table-r">
<table width="100%">
<tbody>
<tr>
<td width="50%">自适应表格</td>
<td width="50%">输入文字</td>
</tr>
<tr>
<td width="50%">自适应表格</td>
<td width="50%">输入文字</td>
</tr>
<tr>
<td width="50%">自适应表格</td>
<td width="50%">输入文字</td>
</tr>
<tr>
<td width="50%">自适应表格</td>
<td width="50%">输入文字</td>
</tr>
</tbody>
</table>
</div>
我们可以在古腾堡编辑器新建一个html区块,然后把上面的代码复制进来,再修改里面的文字内容即可,修改完成之后点HTML区块的【预览】即可。
<tr>
<td width="50%">自适应表格</td>
<td width="50%">输入文字</td>
</tr>
如果需要增加行数,可以在上面的代码添加上面的代码,要多少行就添加多少个。这种方法只适合一些比较简单的表格。
方法二
方法一的表格比较简单,如果你需要使用比较复杂的表格,那么可以使用wordpress插件来实现。这里推荐大家使用TablePress插件,然后再配合它的拓展插件Responsive Tables,这样就可以完美解决移动端表格的自适应问题了。
方法三
方法三还是使用代码来实现,这比较适合懒人,操作如下:
1.找一个别人的能够自适应的表格,然后在浏览器按F12查看代码,复制表格的代码。
2.在wordpress古腾堡编辑器中添加一个html区块,粘贴代码,修改代码中的文本内容,然后点【预览】即可。
© 版权声明
1、本网站名称:草根创业网
2、本站永久网址:https://www.cizhui.cn
3、本网站的文章部分内容可能来源于网络,仅供大家学习与参考,如有侵权,请联系站长QQ:95114390进行删除处理。
4、本站一切资源不代表本站立场,并不代表本站赞同其观点和对其真实性负责。
5、本站一律禁止以任何方式发布或转载任何违法的相关信息,访客发现请向站长举报
6、本站资源大多存储在云盘,如发现链接失效,请联系我们我们会第一时间更新。 项目转载于网络!
7.本网站仅作项目分享,不提供任何收益保障,如遇充值环节或绑定支付账户或输入支付密码之类的异常步骤,建议停止操作!风险自辩!平台不对操作项目的损失负责!
2、本站永久网址:https://www.cizhui.cn
3、本网站的文章部分内容可能来源于网络,仅供大家学习与参考,如有侵权,请联系站长QQ:95114390进行删除处理。
4、本站一切资源不代表本站立场,并不代表本站赞同其观点和对其真实性负责。
5、本站一律禁止以任何方式发布或转载任何违法的相关信息,访客发现请向站长举报
6、本站资源大多存储在云盘,如发现链接失效,请联系我们我们会第一时间更新。 项目转载于网络!
7.本网站仅作项目分享,不提供任何收益保障,如遇充值环节或绑定支付账户或输入支付密码之类的异常步骤,建议停止操作!风险自辩!平台不对操作项目的损失负责!
THE END