【问题标题】:WP table data displays differently on mobileWP 表格数据在移动设备上的显示方式不同
【发布时间】:2018-06-16 01:22:18
【问题描述】:

我的网站上有一张桌子:

    <table>
<tbody>

<tr>
<td>
<p style="text-align: center;">
some text
some text
some text
</p>
p style="text-align: center;">
<strong><span style="font-family: Arial;">SOME BOLD TEXT</span></strong></p>
<p style="text-align: center;">
some text
some text
some text
</p>
</td><p style="text-align: center;">
some text
some text
some text
</p>
p style="text-align: center;"><strong><span style="font-family: Arial;">SOME BOLD TEXT</span></strong></p>
<p style="text-align: center;">
some text
some text
some text
</p>
<td><p style="text-align: center;">
some text
some text
some text
</p>
p style="text-align: center;"><strong><span style="font-family: Arial;">SOME BOLD TEXT</span></strong></p>
<p style="text-align: center;">
some text
some text
some text
</p>
</td><p style="text-align: center;">
some text
some text
some text
</p>
p style="text-align: center;"><strong><span style="font-family: Arial;">SOME BOLD TEXT</span></strong></p>
<p style="text-align: center;">
some text
some text
some text
</p>
</tr>
</tr>
<td><p style="text-align: center;">
some text
some text
some text
</p>
p style="text-align: center;"><strong><span style="font-family: Arial;">SOME BOLD TEXT</span></strong></p>
<p style="text-align: center;">
some text
some text
some text
</p>
</td>
</tr>

</table>
</tbody>

由于某种原因,在移动设备上查看时,FIRST TD 的显示方式有所不同 => 背景是灰色的(我能够摆脱它,将 style="background-color: #ffffff;" 添加到第一个 TD &lt;&gt;。 我遇到的主要问题是所有文本都显示为粗体。 知道如何更改此设置或为什么要这样做吗? 该网站是: http://www.aguaris.com/en/references-mallorca-hotels/ 它对网站上的所有表格都做同样的事情。

【问题讨论】:

    标签: css wordpress mobile html-table


    【解决方案1】:

    在某处有一个内联 css,看起来像这样,并解释了灰色和粗体:

    tr td:first-child {background: #f0f0f0; font-weight:bold;font-size:1.3em;}
    

    正如您所说,它只在移动设备上发挥作用。那是因为它包含在

    @media screen and (max-width: 600px) { ...}
    

    如果您查看源代码,您会看到 99 和 171 之间的代码,其中有问题的部分在 116 和 128 之间。代码以一些德国 cmets 开头。

    如果您无法追踪文件并以某种方式为其创建覆盖,您可能会发现将其放入您的 style.css(或 custom.css,如果您不使用子主题)将完成这项工作:

    @media screen and (max-width: 600px) {
    tr td:first-child {background: #ffffff!important; font-weight:400!important;}
    }
    

    我认为最好尝试正确处理它,通过覆盖,因为您想为网站上的所有表格更正它,而不仅仅是一个。

    有了德国的 cmets,通过搜索站点中的代码来追踪文件应该很容易吗?

    【讨论】:

    • 谢谢!!由于我无法使用 cmets 找到代码,因此我将您的代码添加到样式文件中并且它有效! ;)
    • 太好了 - 很高兴对它进行了排序,感谢您让我知道。 :D
    猜你喜欢
    • 2018-06-25
    • 2021-02-23
    • 1970-01-01
    • 2016-10-11
    • 2014-12-09
    • 1970-01-01
    • 2012-07-07
    • 1970-01-01
    • 2016-11-06
    相关资源
    最近更新 更多