Question

我有一个虚拟产品，显示音乐样本文件供用户收听，然后从中进行选择。＆＃34; https://myproductvideo.com/product/video-with-voice＆＃34; 它是产品的纽带。这是一个wordpress网站，我需要使用html作为产品描述只需要html。在移动视图中，我在表格中以两行显示音乐样本。但是在每行的移动宽度上观看足够大。我想减少行的宽度以适应移动屏幕。我已经尝试了一切但什么都没得到。请参阅代码

    <style>
.clsDes { visibility:visible; } .clsmob { visibility:collapse; } @media screen and (max-width: 768px) { .clsDes { visibility:collapse; } .clsmob { visibility:visible; } }

    <div class="clsmob">
    <table style="width:10px;">
    <tbody>
    <tr>
    <th>Female Voice Samples</th>
    </tr>
    <tr>
    <td>[playlist artists="false" images="false" 
    ids="810,811,812,813,814,815,816,817,818,819"]</td>
    </tr>
    <tr>
    <th>Male Voice Samples</th>
    </tr>
    <tr>
    <td>[playlist artists="false" images="false" 
    ids="821,822,823,824,825,191,192,193,194,195"]</td>
    </tr>
    </tbody>
    </table>
    </div>

    <div class="clsDes" >
    <table >
    <col width="50">
    <col width="50">
    <tr>
    <th>Female Voice Samples</th>
    <th>Male Voice Samples</th>
    </tr>
    <tr>
    <td >[playlist artists="false" images="false" 
    ids="810,811,812,813,814,815,816,817,818,819"]</td>
    <td >[playlist artists="false" images="false" 
    ids="821,822,823,824,825,191,192,193,194,195"]</td>
    </tr>
    </table>
    </div>

Answer 1

我发现了这个 -

在clsDes的移动视图中设置无显示

@media screen and (max-width: 768px) { .clsDes { visibility:collapse; } 
 .clsmob { visibility:visible; } }

到

@media screen and (max-width: 768px) { .clsDes { display:none; } .clsmob { 
 visibility:visible; } }

此代码适用于您共享的代码..但您的问题不同。我去检查你的网站，你需要为玩家设置自定义css。语音播放器的宽度是动态生成的。使用！important修复css中的宽度。

例如：

@media screen and (max-width: 768px) { .wp-playlist wp-audio-playlist wp-
playlist-light{max-width:250px !important}}

试试这个

Answer 2

我试过这个并且有效。

    @media screen and (max-width: 768px) {
    .clsDes { display:none; } 
    .clsmob { visibility:visible;} 
    .wp-playlist {max-width:310px !important; padding: 0px !important; margin: 0px !important;}
    }

如何在html中减小表的大小？

2 个答案: