WordPress外贸独立站如何给表格设置滚动

WordPress系统虽然自带表格功能,但是他自带的还有一些插件无法实现表格的滚得效果。 当表格过长时,在外贸独立站手机端就会导致页面变形,非常影响用户浏览页面的体验,那么如何解决这个问题呢,我们有两种方法。 办法一:表格拆分 也就是将一个大表格分为多个表格,这样在手机端的显示就是从上到下的形式展现,不会影响到布局。 办法二:增加横向滚动 给表格增加一个横向滚动,这样在手机端就可以通过滚动来实现,既不影响布局,也会方便用户的浏览。 给大家介绍实现方法,给表格一个固定宽度,加一个css代码即可。 只设置水平滚动条: <div style=”width:100px;overflow-x:auto”></div> 只设置垂直滚动条: <div style=”height:300px;overflow-y:auto”></div> 水平与垂直都设置: <div style=”width:70px;height:300px;overflow-x:auto;overflow-y:auto”></div> 补充:因为表格的第一列是标题,一起滚动会影响后面的观看体验,所以我们可以将第一列锁住,只让后面的内容滚动,添加以下代码即可: th:first-child, td:first-child {   position: sticky;   left: 0;   background-color: #f2f2f2;       //给第一列增加背景颜色,增强可读性。(注:可加可不加) } 通过以上方式,我们就能完成表格的滚动功能!