如何减小 html 中表格的大小？答案

【问题标题】：How to decrease the size of table in html?如何减小 html 中表格的大小？
【发布时间】：2018-05-06 00:42:02
【问题描述】：

我有一个虚拟产品，它显示音乐样本文件供用户收听，然后从中选择。 "https://myproductvideo.com/product/video-with-voice" 它是产品的链接。这是一个 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>

【问题讨论】：

我认为有帮助的是您以百分比而不是像素为单位提供表格宽度。我认为这应该有所帮助。并为您的 div 提供百分比宽度。
对不起，这不起作用。我以百分比给出了表格和 div 的宽度，但没有工作。
或者你改变可见性：collapse;能见度：无；除非你想要这样并且有目的地这样做。因为这两个是不同的。在这里阅读更多：stackoverflow.com/questions/3695813/…
在将折叠更改为无后....过多的空白已消失。它还稍微改变了宽度行。但不完全是我想要的。
请尝试在您的 CSS 中添加：* { margin:0px; padding:0px; }

标签： css wordpress html woocommerce html-table

【解决方案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}}

试试这个

【讨论】：

很抱歉，上面的内容不起作用....它搞砸了所有的播放列表...我已将“visibility:collapse”更改为“display:none”并且工作了一点，但宽度是主要的问题。
非常感谢......你向我展示了如何做到这一点。
很高兴它有帮助。 :)

【解决方案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;}
    }

【讨论】：