Neu Probleme in der mobilen Ansicht bei zwei Artikeln

[r0xXx]

Hallo,

ich habe Probleme bei zwei Artikeln bei der horizontalen mobilen Ansicht. Hier wird der Text abgeschnitten. In der mobilen vertikalen Ansicht passt auch alles. Bei allen anderen Artikeln funktioniert der Zeilenumbruch. Es handelt sich um die folgenden beiden Seiten:

https://shop.perfectum-computer.de/...ifunktionsgeraet-Drucker-Scanner-Kopierer-Fax
https://shop.perfectum-computer.de/HP-LaserJet-Enterprise-M406dn-Schwarzweiss-Laserdrucker

 

[martinwolf]

Ich kann auf den beiden Seiten nirgends erkennen, dass etwas abgeschnitten wird. Kannst Du mal Screenshots posten, wie das ganze bei Dir ausschaut?

 

[r0xXx]

Der html-code zu der Artikelbeschreibung sieht wie folgt aus:

<table style="width: 100%; border-collapse: collapse;" width="100%">
<tbody>
<tr>
<td style="border: 0px black; border-image: none; width: 310px; height: 19px;"><strong><font face="Calibri">Bedienfeld:</font></strong></td>
<td style="border: 0px black; border-image: none; width: 1258px;"><font face="Calibri">6,85 cm Farb-Bedienfeld ohne Touch-Funktion mit Ziffernblock mit 24 Tasten</font></td>
</tr>
<tr>
<td style="border: 0px black; border-image: none; height: 19px;"><strong><font face="Calibri">Drucktechnologie:</font></strong></td>
<td style="border: 0px black; border-image: none;"><font face="Calibri">Laser</font></td>
</tr>
<tr>
<td style="border: 0px black; border-image: none; height: 19px;"><strong><font face="Calibri">Geschwindigkeit:</font></strong></td>
<td style="border: 0px black; border-image: none; width: 1258px;"><font face="Calibri">Schwarz (A4, normal): Bis zu 38 Seiten/Min. (Standard); Bis zu 40 Seiten/Min. (HP High Speed-Modus);<br />
Schwarzwei&szlig; (A4, beidseitiger Druck): Bis zu 31 Bilder/Min.;</font></td>
</tr>
<tr>
<td style="border: 0px black; border-image: none; height: 19px;"><strong><font face="Calibri">Druckaufl&ouml;sung:</font></strong></td>
<td style="border: 0px black; border-image: none; width: 1258px;"><font face="Calibri">Schwarzwei&szlig; (optimal): Bis zu 1200 x 1200 dpi;<br />
Technologie: 300 dpi, 600 dpi, HP FastRes 1200, HP ProRes 1200;</font></td>
</tr>
<tr>
<td style="border: 0px black; border-image: none; height: 19px;"><strong><font face="Calibri">Monatliches Druckvolumen:</font></strong></td>
<td style="border: 0px black; border-image: none; width: 1258px;"><font face="Calibri">Bis zu 100.000 Seiten DIN A4; Empfohlenes monatliches Druckvolumen: 900 bis 4.800 Seiten</font></td>
</tr>
<tr>
<td style="border: 0px black; border-image: none; height: 19px;"><strong><font face="Calibri">Intelligente Softwarefunktionen f&uuml;r Drucken:</font></strong></td>
<td style="border: 0px black; border-image: none; width: 1258px;"><font face="Calibri">Druckvorschau, Duplex, Drucken mehrerer Seiten auf 1 Blatt (2, 4, 6, 9, 16), Sortieren, Wasserzeichen, Speichern von Druckauftr&auml;gen, leicht zug&auml;nglicher USB-Anschluss</font></td>
</tr>
<tr>
<td style="border: 0px black; border-image: none; height: 19px;"><strong><font face="Calibri">Standard-Drucksprachen:</font></strong></td>
<td style="border: 0px black; border-image: none; width: 1258px;"><font face="Calibri">HP PCL 6, HP PCL 5, HP PostScript Level 3-Emulation, nativer PDF-Druck (v1.7), Apple AirPrint&trade;</font></td>
</tr>
<tr>
<td style="border: 0px black; border-image: none; height: 19px;"><strong><font face="Calibri">Schriftarten und Schriftbilder:</font></strong></td>
<td style="border: 0px black; border-image: none; width: 1258px;"><font face="Calibri">105 interne TrueType-Schriftarten, skalierbar in HP PCL, 92 interne Schriftarten, skalierbar in HP PostScript Level 3-Emulation (Euro-Symbol enthalten); 1 interne<br />
Unicode-Schriftart (Andale Mono World Type); 2 interne Windows Vista 8-Schriftarten (Calibri, Cambria); L&ouml;sungen f&uuml;r zus&auml;tzliche Schriftarten &uuml;ber Flash-Speicherkarten<br />
von Drittanbietern verf&uuml;gbar; HP LaserJet Schriftarten und IPDS-Emulation sind unter http://www.hp.com/go/laserjetfonts verf&uuml;gbar</font></td>
</tr>
<tr>
<td style="border: 0px black; border-image: none; height: 19px;"><strong><font face="Calibri">Druckbereich:</font></strong></td>
<td style="border: 0px black; border-image: none; width: 1258px;"><font face="Calibri">R&auml;nder des Druckbereichs Oben: 2 mm, Unten: 2 mm, Links: 2 mm, Rechts: 2 mm; Maximaler Druckbereich : 212 x 352 mm</font></td>
</tr>
<tr>
<td style="border: 0px black; border-image: none; height: 19px;"><strong><font face="Calibri">Beidseitiger Druck:</font></strong></td>
<td style="border: 0px black; border-image: none; width: 1258px;"><font face="Calibri">Automatisch (Standard)</font></td>
</tr>
<tr>
<td style="border: 0px black; border-image: none; height: 19px;"><strong><font face="Calibri">Prozessorgeschwindigkeit:</font></strong></td>
<td style="border: 0px black; border-image: none; width: 1258px;"><font face="Calibri">800 MHz</font></td>
</tr>
<tr>
<td style="border: 0px black; border-image: none; height: 19px;"><strong><font face="Calibri">Anschl&uuml;sse:</font></strong></td>
<td style="border: 0px black; border-image: none; width: 1258px;"><font face="Calibri">1x Hi-Speed USB 2.0-Hostanschl&uuml;sse; 1x Hi-Speed USB 2.0-Ger&auml;teanschluss; 1x Gigabit Ethernet 10/100/1000T-Netzwerk</font></td>
</tr>
<tr>
<td style="border: 0px black; border-image: none; height: 19px;"><strong><font face="Calibri">Optional:</font></strong></td>
<td style="border: 0px black; border-image: none; width: 1258px;"><font face="Calibri">HP Jetdirect LAN-Zubeh&ouml;r 8FP31A; HP Jetdirect 3100w BLE/NFC/Wireless-Zubeh&ouml;r 3JN69A</font></td>
</tr>
<tr>
<td style="border: 0px black; border-image: none; height: 19px;"><strong><font face="Calibri">Wireless:</font></strong></td>
<td style="border: 0px black; border-image: none; width: 1258px;"><font face="Calibri">Optional, wird mit dem Kauf eines Wireless-Hardwarezubeh&ouml;rs aktiviert. Dual-Band-Wireless-Station- und Wi-Fi Direct-Funktionen mit HP Jetdirect 3100w<br />
BLE/NFC/Wireless-Zubeh&ouml;r 3JN69A verf&uuml;gbar</font></td>
</tr>
<tr>
<td style="border: 0px black; border-image: none; height: 19px;"><strong><font face="Calibri">Funktion f&uuml;r mobiles Drucken:</font></strong></td>
<td style="border: 0px black; border-image: none; width: 1258px;"><font face="Calibri">HP ePrint; Apple AirPrint&trade;; NFC Touch-to-Print (optional); Mopria&trade;-zertifiziert; Drucken &uuml;ber Wi-Fi&reg; Direct; ROAM-f&auml;hig f&uuml;r einfaches Drucken; PrinterOn Print</font></td>
</tr>
<tr>
<td style="border: 0px black; border-image: none; height: 19px;"><strong><font face="Calibri">Unterst&uuml;tzte Netzwerkprotokolle:</font></strong></td>
<td style="border: 0px black; border-image: none; width: 1258px;"><font face="Calibri">&Uuml;ber die integrierte Netzwerkl&ouml;sung: TCP/IP, IPv4, IPv6; Drucken: TCP-IP Port 9100 direkter Modus, LPD, Web-Service-Druck, IPP 2.0, Apple AirPrint&trade;, HP ePrint;<br />
Erkennung: SLP, Bonjour, Web Services Discovery; IP-Konfiguration: IPv4 (BootP, DHCP, AutoIP, Manual), IPv6 (Stateless Link-Local und &uuml;ber Router, Stateful &uuml;ber DHCPv6);<br />
Verwaltung: SNMPv2/v3, HTTP/HTTPS, Syslog; Sicherheit: SNMPv3, SSL-Zertifikatverwaltung, IPsec (IKEv1 und IKEv2), Firewall, 802.1x</font></td>
</tr>
<tr>
<td style="border: 0px black; border-image: none; height: 19px;"><strong><font face="Calibri">Netzwerkfunktionen:</font></strong></td>
<td style="border: 0px black; border-image: none; width: 1258px;"><font face="Calibri">Ja, &uuml;ber HP Jetdirect Ethernet Embedded Print Server (Standard), der Folgendes unterst&uuml;tzt: 10Base-T, 100Base-Tx, 1000Base-T; 802.3az (EEE)-Unterst&uuml;tzung f&uuml;r Fast<br />
Ethernet- und Gigabit-Verbindungen; IPsec (Standard); 802.11a/b/g/n Wireless-Netzwerke (optional); Zweiter Ethernet-Anschluss (optional).</font></td>
</tr>
<tr>
<td style="border: 0px black; border-image: none; height: 19px;"><strong><font face="Calibri">Speicher:</font></strong></td>
<td style="border: 0px black; border-image: none; width: 1258px;"><font face="Calibri">Standard: 1 GB ;Maximal: 1 GB</font></td>
</tr>
<tr>
<td style="border: 0px black; border-image: none; height: 19px;"><strong><font face="Calibri">Anzahl Papierf&auml;cher:</font></strong></td>
<td style="border: 0px black; border-image: none;"><font face="Calibri">2</font></td>
</tr>
<tr>
<td style="border: 0px black; border-image: none; height: 19px;"><strong><font face="Calibri">Medientypen:</font></strong></td>
<td style="border: 0px black; border-image: none; width: 1258px;"><font face="Calibri">Papier (normal, EcoEFFICIENT, leicht, schwer, Bondpapier, farbiges Papier, vorbedruckt, vorgelocht, recycelt, rau); Umschl&auml;ge; Etiketten</font></td>
</tr>
<tr>
<td style="border: 0px black; border-image: none; height: 19px;"><strong><font face="Calibri">Medienformat:</font></strong></td>
<td style="border: 0px black; border-image: none; width: 1258px;"><font face="Calibri">Benutzerdefiniert (metrisch): Fach 1: 76 x 127 bis 216 x 356 mm; Fach 2: 105 x 148 bis 216 x 356 mm; Optionales Fach: 105 x 148 bis 216 x 356 mm<br />
Unterst&uuml;tzt (metrisch): Fach 1: A4, RA4, A5, B5 (JIS), B6 (JIS), 10 x 15 cm, A6, 16K, Umschl&auml;ge (B5, C5 ISO, C6, DL ISO); Benutzerdefiniert: 76 x 127 bis 216 x 356 mm;<br />
Fach 2: A4; RA4; A5; B5 (JIS); B6 (JIS); A6; 16K; 105 x 148 bis 216 x 356 mm; Optionales Fach 3: A4; RA4; A5; B5 (JIS); B6 (JIS); A6; 16K; 105 x 148 bis 216 x 356 mm</font></td>
</tr>
<tr>
<td style="border: 0px black; border-image: none; height: 19px;"><strong><font face="Calibri">Gewicht:</font></strong></td>
<td style="border: 0px black; border-image: none; width: 1258px;"><font face="Calibri">8.5 kg</font></td>
</tr>
<tr>
<td style="border: 0px black; border-image: none; height: 19px;"><strong><font face="Calibri">Abmessung:</font></strong></td>
<td style="border: 0px black; border-image: none;"><font face="Calibri">381 x 357 x 220 mm</font></td>
</tr>
<tr>
<td style="border: 0px black; border-image: none; height: 19px;"><strong><font face="Calibri">Garantie:</font></strong></td>
<td style="border: 0px black; border-image: none; width: 1258px;"><font face="Calibri">24 Monate</font></td>
</tr>
<tr>
<td style="border: 0px black; border-image: none; height: 19px;"><strong><font face="Calibri">Farbe:</font></strong></td>
<td style="border: 0px black; border-image: none;"><font face="Calibri">wei&szlig;</font></td>
</tr>
</tbody>
<colgroup>
<col style="width: 232pt;" width="310" />
<col style="width: 943pt;" width="1258" />
</colgroup>
</table>

 

[martinwolf]

Du hast oben horizontale Ansicht geschrieben, das tritt aber in der vertikalen Ansicht auf. Egal. Das Problem sind die Tabellen. Die sind nicht responsive. Du müsstest ein <div class="table-responsive"></div> um die Tabelle setzen. Da sorgt dann dafür, dass die Tabelle seitlich scrollbar wird. Weiter hilft es der Tabelle eine Klasse "table" zu geben, damit die auch schick ausschaut.

 

[css-umsetzung]

Ab einem Bestimmten Punkt macht es keinen Sinn mehr eine Tabelle als Tabelle darzustellen, insbesondere so eine Darstellung wie bei dir.

gib deiner Tabelle eine Klasse (im css gehe ich von der Klasse "css-block-table" aus), überlege dir ab welchem Punkt du das anders darstellen möchtest und erweitere dazu passend dein css.
Du solltest auch die Schriftarten Definitionen entfernen, nicht jeder hat Calibri auf seinem Rechner und ich sehe bei dir nicht, das du es über deinen Shop auslieferst.

@media(max-width:500px) {
.css-block-table tr,.css-block-table td, table.css-block-table,.css-block-table tbody {
    display:block ;
    width:100% !important;
    height:auto !important;
  }
  .css-block-table tr td:first-child {
    background-color:#1C1D2B;
    color:#fff ;
  }
  .css-block-table td {
    padding:5px;
  }
}

Dann sieht das bis 500px so aus: