Tabelle in der mobilen Ansicht anpassen

Thema wurde von richardhoehn, 25. September 2018 erstellt.

  1. richardhoehn
    richardhoehn Erfahrener Benutzer
    Registriert seit:
    17. Januar 2013
    Beiträge:
    51
    Danke erhalten:
    1
    Danke vergeben:
    1
    mobile.png

    Hallo, in meiner mobilen Ansicht zeigt der die Tabelle zwar untereinander, aber zu breit.

    Habe folgenden Code:

    <div class="row">
    <div class="col-xs-12 col-md-6">
    <table border="0" cellpadding="1" cellspacing="1" style="width: 100%;">
    <tbody>
    <tr>
    <td>
    <div style="width:45%; text-align: center;border-bottom: 2px solid #000000">
    <table border="0" cellpadding="1" cellspacing="1" style="width: 100%;">
    <tbody>
    <tr>
    <td style="width: 100%; height:28px;"><span style="font-size:14px;"><span style="color:#393939;"><strong><span style="width: 300px;"><span style="font-family: arial, helvetica, sans-serif;">ARTIKELDATEN</span> </span></strong></span></span></td>
    </tr>
    </tbody>
    </table>
    </div>

    <hr noshade="noshade" style=" margin-top:0px;" /></td>
    </tr>
    </tbody>
    </table>
    <br />
    <span style="font-size:12px;"><span style="font-family:arial,helvetica,sans-serif;"><strong><span style="color:#000000;">Anwendungsbereich</span></strong></span></span>

    <table border="0" cellpadding="0" cellspacing="0" style="width: 100%; border-top: 1px solid #e7e7e7;">
    <tbody>
    </tbody>
    <tbody>
    <tr>
    <td style="width: 45%;height:34px;"><span style="font-size:12px;"><span style="font-family:arial,helvetica,sans-serif;"><span style="color: rgb(0, 0, 0); line-height: 1.8em;">Anwendung</span></span></span><br />
    <br />
    &nbsp;</td>
    <td style="width: 55%; height: 34px;">
    <table border="0" cellpadding="1" cellspacing="1" style="width: 100%;">
    <tbody>
    <tr>
    <td style="width: 100%px; height: 20px;"><span style="font-size:12px;"><span style="font-family:arial,helvetica,sans-serif;"><font color="#000000"><span style="font-family:arial,helvetica,sans-serif;"><font color="#000000">Werbetechnik</font></span></font></span></span></td>
    </tr>
    <tr>
    <td style="width: 100%; height: 20px;"><span style="font-size:12px;"><span style="font-family:arial,helvetica,sans-serif;"><font color="#000000"><span style="font-family:arial,helvetica,sans-serif;"><font color="#000000">&Uuml;bertragung von Schriften und Logos</font></span></font></span></span></td>
    </tr>
    <tr>
    <td style="width: 100%; height: 20px;"><span style="font-size:12px;"><span style="font-family:arial,helvetica,sans-serif;"><font color="#000000"><span style="font-family:arial,helvetica,sans-serif;"><font color="#000000">Applikationen, die eine geringe Klebkraft ben&ouml;tigen</font></span></font></span></span></td>
    </tr>
    </tbody>
    </table>
    </td>
    </tr>
    </tbody>
    </table>
    <br />
    <span style="font-size:12px;"><span style="font-family:arial,helvetica,sans-serif;"><strong><span style="color:#000000;">Abmessungen</span></strong></span></span>

    <table border="0" cellpadding="0" cellspacing="0" style="width: 100%; border-top: 1px solid #e7e7e7;">
    <tbody>
    <tr>
    <td style="width: 45%; height: 34px;"><span style="font-size:12px;"><span style="font-family:arial,helvetica,sans-serif;"><span style="color:#000000;">Dicke</span></span></span></td>
    <td style="width: 55%; height: 34px;"><span style="font-size:12px;"><span style="font-family:arial,helvetica,sans-serif;"><span style="color:#000000;">0,150 mm (150 &micro;)</span></span></span></td>
    </tr>
    <tr>
    <td style="width: 45%; height: 34px;"><span style="font-size:12px;"><span style="font-family:arial,helvetica,sans-serif;"><span style="color:#000000;">Breiten</span></span></span></td>
    <td style="width: 55%; height: 34px;"><span style="font-size:12px;"><span style="font-family:arial,helvetica,sans-serif;"><span style="color:#000000;">20, 30, 40, 50, 60, 70, 80, 90, 100, 122 cm</span></span></span></td>
    </tr>
    <tr>
    <td style="width: 45%; height: 34px;"><span style="font-size:12px;"><span style="font-family:arial,helvetica,sans-serif;"><span style="color:#000000;">L&auml;nge</span></span></span></td>
    <td style="width: 55%; height: 34px;"><span style="font-size:12px;"><font color="#000000" face="arial, helvetica, sans-serif">100 m</font></span></td>
    </tr>
    <tr>
    </tr>
    </tbody>
    </table>
    <span style="font-size:12px;"> <span style="font-family:arial,helvetica,sans-serif;"> <span style="color:#000000;"> &nbsp;<br />
    <strong>Material</strong></span></span></span>

    <table border="0" cellpadding="0" cellspacing="0" style="width: 100%; border-top: 1px solid #e7e7e7;">
    <tbody>
    <tr>
    <td style="width: 45%; height: 34px;"><span style="font-size:12px;"><span style="font-family:arial,helvetica,sans-serif;"><span style="color:#000000;">Material</span></span></span></td>
    <td style="width: 55%; height: 34px;"><span style="font-size:12px;"><span style="font-family:arial,helvetica,sans-serif;"><span style="color:#000000;">Montagefolie auf Polyethylen-Basis</span></span></span></td>
    </tr>
    <tr>
    <td style="width: 45%; height: 34px; text-align: justify;"><span style="font-size:12px;"><span style="font-family:arial,helvetica,sans-serif;"><span style="color:#000000;">Farbe</span></span></span></td>
    <td style="width: 55%; height: 34px; text-align: justify;"><span style="font-size:12px;"><span style="font-family:arial,helvetica,sans-serif;"><span style="color:#000000;">transparent</span></span></span></td>
    </tr>
    <tr>
    <td style="width: 45%; height: 34px;"><span style="font-size:12px;"><span style="font-family:arial,helvetica,sans-serif;"><span style="color:#000000;">Oberfl&auml;che</span></span></span></td>
    <td style="width: 55%; height: 34px;"><span style="font-size:12px;"><span style="font-family:arial,helvetica,sans-serif;"><span style="color:#000000;">matt, fein genarbt</span></span></span></td>
    </tr>
    <tr>
    <td style="width: 45%; height: 34px; text-align: justify;"><span style="font-size:12px;"><span style="font-family:arial,helvetica,sans-serif;"><font color="#000000">Klebstoff</font></span></span></td>
    <td style="width: 55%; height: 34px; text-align: justify;"><span style="font-size:12px;"><span style="font-family:arial,helvetica,sans-serif;"><span style="color:#000000;">modifiziertes Polyacrylat, geringe Klebkrafteinstellung</span></span></span></td>
    </tr>
    <tr>
    <td style="width: 45%; height: 34px; text-align: justify;"><span style="font-size:12px;"><span style="font-family:arial,helvetica,sans-serif;"><font color="#000000">Klebkraft</font></span></span></td>
    <td style="width: 55%; height: 34px; text-align: justify;"><span style="font-size:12px;"><span style="font-family:arial,helvetica,sans-serif;"><span style="color:#000000;">&lt; 1 N/25 mm</span></span></span></td>
    </tr>
    </tbody>
    </table>
    <br />
    <span style="font-size:12px;"><span style="font-family:arial,helvetica,sans-serif;"><strong>Lagerhaltung</strong></span></span>

    <table border="0" cellpadding="0" cellspacing="0" style="width: 100%; border-top: 1px solid #e7e7e7;">
    <tbody>
    <tr>
    <td style="width: 45%; height: 34px;"><span style="font-size:12px;"><span style="font-family:arial,helvetica,sans-serif;"><span style="color:#000000;">Lagerf&auml;higkeit</span></span></span></td>
    <td style="width: 55%; height: 34px;"><span style="font-size:12px;"><span style="font-family:arial,helvetica,sans-serif;"><span style="color:#000000;">2 Jahre</span></span></span></td>
    </tr>
    <tr>
    <td style="width: 45%; height: 34px; text-align: justify;"><span style="font-size:12px;"><span style="font-family:arial,helvetica,sans-serif;"><span style="color:#000000;">Lager- / Transportbedinungen</span></span></span></td>
    <td style="width: 55%; height: 34px; text-align: justify;"><span style="color:#000000;"><span style="font-size:12px;"><span style="font-family:arial,helvetica,sans-serif;">in der&nbsp;Originalverpackung bei 20&deg;C und &plusmn; 50% rel. Luftfeuchtigkeit</span></span></span></td>
    </tr>
    </tbody>
    </table>
    <br />
    <span style="font-size:12px;"><span style="font-family:arial,helvetica,sans-serif;"><span style="color:#000000;"><strong>Preisangabe</strong></span></span></span>

    <table border="0" cellpadding="0" cellspacing="0" style="width: 100%; border-top: 1px solid #e7e7e7;">
    <tbody>
    <tr>
    <td style="width: 45%; height: 34px;"><span style="font-size:12px;"><span style="font-family:arial,helvetica,sans-serif;"><span style="color:#000000;">Preis</span></span></span></td>
    <td style="width: 55%; height: 34px;"><span style="font-size:12px;"><span style="font-family:arial,helvetica,sans-serif;"><span style="color:#000000;">je Rolle</span></span></span></td>
    </tr>
    </tbody>
    </table>
    <br />
    <span style="font-size:12px;"><span style="font-family:arial,helvetica,sans-serif;"><span style="color:#999999;">** Weitere Daten entnehmen Sie bitte dem technischen Datenblatt (s. Dokumente).</span></span></span><br />
    &nbsp;
    </div>

    <div class="col-xs-12 col-md-6">
    <div style="text-align: center;">
    <table border="0" cellpadding="1" cellspacing="1" style="width: 100%;">
    <tbody>
    <tr>
    <td>
    <div style="width:45%; text-align: center;border-bottom: 2px solid #000000">
    <table border="0" cellpadding="1" cellspacing="1" style="width: 100%;">
    <tbody>
    <tr>
    <td style="width: 100%; height:28px;"><span style="font-size:14px;"><span style="color:#393939;"><strong><span style="width: 300px;"><span style="font-family: arial, helvetica, sans-serif;">ARTIKELBESCHREIBUNG</span> </span></strong></span></span></td>
    </tr>
    </tbody>
    </table>
    </div>

    <hr noshade="noshade" style=" margin-top:0px;" /></td>
    </tr>
    </tbody>
    </table>
    &nbsp;

    <div style="text-align: justify;">
    <span style="font-size:12px;"><span style="font-family:arial,helvetica,sans-serif;"><span style="line-height: 1.8em;"><strong>ORATAPE&nbsp;LT95 Application Tape</strong> ist eine &Uuml;bertragungsfolie mit einer &uuml;beraus geringen Klebkrafteinstellung. Die transparente Montagefolie auf Polyethylen-Basis weist eine&nbsp;fein genarbte&nbsp;Oberfl&auml;che sowie eine hohe Dehnfestigkeit auf, das die Positionierung des Transfers enorm erleichert. Durch die geringe Klebkraft eignet sich die Folie besonders f&uuml;r die &Uuml;bertragung von Schriftz&uuml;gen und Logos&nbsp;auf Innenw&auml;nde (z.B. Wanddekorationen, Wall-Art oder Werbezwecken). Nach der &Uuml;bertragung der Folie&nbsp;l&auml;sst sie sich kinderleicht wieder entfernen. Zudem ist die Montagefolie sowohl f&uuml;r die Trocken- als auch f&uuml;r die Nassverklebung geeignet.&nbsp;</span></span></span>
    </div>
    <span style="font-size:12px;">&nbsp;</span>

    <div style="text-align: left;">
    <span style="font-size:12px;"><span style="font-family:arial,helvetica,sans-serif;"><span style="line-height: 1.8em;"><strong>Bitte beachten Sie die Verarbeitungshinweise des Herstellers.</strong></span></span></span><br />
    <br />
    <br />
    <br />
    <br />
    &nbsp;
    </div>
    </div>

    <table border="0" cellpadding="1" cellspacing="1" style="width: 100%;">
    <tbody>
    <tr>
    <td>
    <div style="width:45%; text-align: center;border-bottom: 2px solid #000000">
    <table border="0" cellpadding="1" cellspacing="1" style="width: 100%;">
    <tbody>
    <tr>
    <td style="width: 100%; height:28px;"><span style="font-size:14px;"><span style="color:#393939;"><strong><span style="width: 300px;"><span style="font-family: arial, helvetica, sans-serif;">DOKUMENTE</span> </span></strong></span></span></td>
    </tr>
    </tbody>
    </table>
    </div>

    <hr noshade="noshade" style=" margin-top:0px;" /></td>
    </tr>
    </tbody>
    </table>
    &nbsp;

    <table border="0" cellpadding="1" cellspacing="1" style="width: 100%;">
    <tbody>
    <tr>
    <td><span style="font-size:12px;"><span style="height: 30px;"><span style="font-family:arial,helvetica,sans-serif;"><span style="line-height: 1.8em;"><a href="https://www.plotterfolie.de/media/products/oratape-lt95-eu-de.pdf" target="_blank" title="Technisches Datenblatt ORATAPE LT95"><i aria-hidden="true" class="fa fa-file-pdf-o"></i> Technisches Datenblatt ORATAPE LT95 </a></span></span></span></span></td>
    </tr>
    <tr>
    <td><span style="font-size:12px;"><span style="height: 30px;"><span style="font-family:arial,helvetica,sans-serif;"><span style="line-height: 1.8em;"><a href="https://www.plotterfolie.de/media/products/ei-oratape-lt95-application-tape-de.pdf" target="_blank" title="Erzeugnisinformation ORATAPE LT95"><i aria-hidden="true" class="fa fa-file-pdf-o"></i> Erzeugnisinformation ORATAPE LT95</a></span></span></span></span></td>
    </tr>
    </tbody>
    </table>
    </div>
    </div>
     
  2. barbara
    barbara G-WARD 2014-2020
    Registriert seit:
    14. August 2011
    Beiträge:
    35.657
    Danke erhalten:
    11.371
    Danke vergeben:
    1.617
    Keine festen px-Größen angeben

    %px geht auch nicht, da gehören nur % rein

    Dann würde ich nie Schriftart und Farbe in die Tabelle schreiben, wenn diese nicht wirklich vom Standard abweichen.
    Änderst du sonst irgendwann die Schrift, musst Du das in jeder Tabelle (oder jedem Artikel) einzeln machen.

    Dann schau mal hier:
    <td style="width: 100%; height: 20px;"><span style="font-size:12px;"><span style="font-family:arial,helvetica,sans-serif;"><font color="#000000"><span style="font-family:arial,helvetica,sans-serif;"><font color="#000000">&Uuml;bertragung von Schriften und Logos</font></span></font></span></span></td>

    Das ist unnötiger Datenmüll, so etwas sollte man vermeiden.

    Und noch etwas:
    bitte nutze das nächste mal für so lange Texte oder Codes die Code-Box.
    die findest du hinter dem kleinen "+" - Symbol in der Leiste über dem Textfeld :)
     
  3. richardhoehn
    richardhoehn Erfahrener Benutzer
    Registriert seit:
    17. Januar 2013
    Beiträge:
    51
    Danke erhalten:
    1
    Danke vergeben:
    1
    Perfekt hat geklappt danke!!