css - 如何减小html中表格的大小？

Question

我有一个虚拟产品，它显示音乐样本文件供用户收听，然后从中选择。 “https://myproductvideo.com/product/video-with-voice” 这是产品的链接。这是一个 wordpress 网站，我需要使用 html，因为产品描述只需要 html。在移动 View 中，我在两行的表格中显示了音乐样本。但是每行的移动宽度足够大。我想减小行宽以适应移动屏幕。我已经尝试了一切，但一无所获。请看代码

    <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 设置在移动 View 中不显示

@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}}

试试这个