css 如何修复WordPress网站上移动的视图中的表大小?

pinkon5k  于 2023-04-08  发布在  WordPress
关注(0)|答案(1)|浏览(155)

我在一个体育相关的网站上,我写的不同的运动。我写的关于球员的板球记录的文章。我包括在后记录的表。表的最组成的3至5列。所以,当任何人访问后在移动的上的记录表是不能正确地查看移动。Check here。告诉我如何在没有任何插件的情况下在移动的视图中显示完整的表格。这是一个WordPress网站。
我希望一些给予我指导如何解决它,或者如果有任何代码放在帖子中并解决这个问题也分享它。

von4xj4u

von4xj4u1#

要在WordPress网站的移动的视图中修复表格大小,您可以在主题的样式表中添加一些CSS,或者使用定制器添加一些自定义CSS。
下面是一个示例代码片段,您可以将其添加到主题的样式表中,以使表格具有响应性并适合移动的屏幕:

@media (max-width: 767px) {
  table {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

只有当屏幕宽度小于或等于767 px(大多数移动的设备在纵向模式下的宽度)时,此CSS代码才会将样式应用于表格元素。width和max-width属性将表格的宽度设置为100%,使其对屏幕尺寸做出响应。溢出-x属性的值为auto时,会在表的内容溢出其容器时向表添加水平滚动条,而-webkit-overflow-scrolling属性则可以在iOS设备上实现平滑滚动。
要将此代码添加到主题的样式表中,请转到WordPress Jmeter 板中的外观〉编辑器,然后选择主题的样式表。将代码添加到文件的底部并保存更改。
或者,您可以使用定制器添加CSS代码。转到外观〉自定义〉其他CSS并将代码粘贴在那里。保存更改,表格现在应该可以在移动的设备上响应。

相关问题