Wie verringere ich die Größe der Tabelle in HTML?

Ich habe ein virtuelles Produkt, das Musikbeispieldateien zeigt, die der Benutzer hören und dann aus ihnen auswählen kann. "https://myproductvideo.com/product/video-with-voice" Es ist die Verbindung des Produktes. Dies ist eine Wordpress-Website und ich muss mit HTML arbeiten, da die Produktbeschreibung nur HTML verwendet. In der mobilen Ansicht habe ich Musikbeispiele innerhalb einer Tabelle in zwei Reihen gezeigt. Aber das Anzeigen in der mobilen Breite jeder Reihe ist groß genug. Ich möchte die Breite der Reihe verringern, um in beweglichen Bildschirm zu passen. Ich habe alles versucht, aber nichts bekommen. Bitte beachten Sie den CodeWie verringere ich die Größe der Tabelle in 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>

Quelle

2017-11-22 Tehreem Shahbaz

Ich denke, was helfen würde ist, dass Sie die Tischbreite in Prozent und nicht in Pixel geben. Ich denke, das sollte helfen. Und geben Sie Ihren Divs die Breite in Prozent. – Doggo

Entschuldigung, das funktioniert nicht. Ich habe die Breite der Tabelle und div in Prozent angegeben, funktioniert aber nicht. –

Oder Sie ändern die Sichtbarkeit: reduzieren; Sichtbarkeit: keine; es sei denn du willst es so und tat dies mit Absicht. Weil diese zwei verschieden sind. Lesen Sie hier mehr: https://StackOverflow.com/Questions/3695813/Difference-between-visibilitycollapse-and-displaynone – Doggo

ich diesen gefunden -

Set Anzeige keine in Mobile Ansicht für 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; } }

Dieser Code funktioniert perfekt für den von Ihnen geteilten Code .. aber Ihr Problem ist anders. Ich ging, um Ihre Website zu überprüfen, müssen Sie benutzerdefinierte CSS für Spieler einstellen. Breite des Voice-Players wird dynamisch generiert. fix dort Breite in CSS mit! wichtig.

Beispiel:

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

Versuchen Sie dieses

Quelle

2017-11-22 12:34:16

Sorry zu sagen, dass oben funktioniert nicht .... es vermasselt alle pylist ... Ich habe "Sichtbarkeit: reduzieren" auf "Anzeige: keine" und arbeitete ein wenig, aber die Breite ist das Hauptproblem. –

Vielen Dank ... du hast mir einen Weg gezeigt, wie es geht. –

Ich bin froh, dass es geholfen hat. :) –

habe ich versucht, dies und es funktionierte.

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

Quelle

2017-11-22 18:24:11

Wie verringere ich die Größe der Tabelle in HTML?

Antwort

Verwandte Themen