Hallo, für einen Kunden sind wir derzeit an einem Gambio Shop welcher auf der Startseite eine Tabelle verwendet. Könnt Ihr mir vielleicht weiterhelfen? Ich möchte dass die Tabelle responsive ist also kleiner wird wenn der Kunde mit einem Smartphone oder Tablet auf die Seite geht. Derzeit wird die Tabelle dann einfach nicht ganz angezeigt weil Sie nicht auf das Display passt. Hier mal ein Auszug aus dem Quellcode: <table align="left" border="1" bordercolor="4e92bd" cellpadding="20px" cellspacing="0" padding="15px" style="width: 1168px; margin-left: -15px;"> <tbody> <tr> <td> <table align="center" border="0" cellpadding="10" cellspacing="10" style="width: 1100px;"> <tbody>
Schau mal im Gambio-Testshop 2 (Link nur für registrierte Nutzer sichtbar.) Im Tab "Spezifikaton" ist eine Tabelle Den Quellcode dazu kannst Du im Admin einfach kopieren und anpassen
mit <div class="table-responsive"> <table class="table table-bordered table-striped">... Tabelle </div> und width natürlich als max-width
Wenn Du nichts an dem betreffenden Bereich geändert hast, hat der Shop das schon so im css eingebaut. Probier das einfach mal aus.
Ich möchte in einem Artikel eine responsive Tabelle als eine Art Infobox einzurichten. Wenn ich mir den Artikel im Desktop-Browser anschaue ist es soweit in Ordnung. Wenn ich mit den Artikel auf meinen Smartphone anschaue dann macht die Tabelle auf mich keinen responsiven Eindruck, da der Text ewig weit nach rechts raus geht... Hier der Link zum (Test-)Artikel (fürs Smartphone), siehe die graue Infobox mit den vier verschiedenen Stofffarben am Ende des Artikels: (Link nur für registrierte Nutzer sichtbar.) Aktuell verwende ich folgenden max-width:="50%" Parameter:: Code: <div class="table-responsive"> <table cellpadding="5" cellspacing="5" class="table table-bordered" max-width:="50%" style="background: rgb(222, 222, 222);"> <tbody> <tr> Wie muss denn der max-width-Parameter (für Smartphones passend) tatsächlich sein, damit er stimmt oder gibt es ein anderes Problem?
<table cellpadding="5" cellspacing="5" class="table table-bordered" max-width:="50%" style="background: rgb(222, 222, 222);"> Das rote muss raus, dann funktioniert das. Da table ist schon davor definiert.
Was mir noch aufgefallen ist, dass die Parameter CELLPADDING und CELLSPACING keinerlei Wirkungen hatten und es keine entsprechenden Abstände gab... Ich habe mich dann auf Table-Row Ebene mit Einrückung(en), wie diese beholfen: <tr> <div style="margin-left: 15px;"> Text...... Aber wenn man einen langen Text bzw. viele Rows in einer Tabelle hat kann das auch nicht der Weisheit letzter Schluss sein... Frage: Ist das cellspacing="5" irgendwie falsch definiert oder wurde der Parameter abgeschafft oder gibt es dazu evtl, einen neuen entspr. Parameter?
schau mal da: http://holdirbootstrap.de/css/#tables bei table-responsive werden manche alte Sachen nicht mehr benötigt. Ich mache persönliche Anpassungen für die table-Zellen mit css. z.B. für eine dreispaltige Tabelle mit unterschiedlich langen Text, damit die Zellen den Text darin umbrechen: Code: .table-responsive table>tbody>tr>td, .table-responsive table>tfoot>tr>td, .table-responsive table>thead>tr>td{ width: 33%; }
Danke, eine dreispaltige Tabelle ist ein guter Tipp, um zu erreichen, dass links und rechts die Texte nicht an den Tabellenrahmen stoßen, sondern vorher umgebrochen werden!
Also ich bastel gerade mit dem gleichen Problem herum... Ich denke es kann doch nicht der Weisheit letzter Schluß sein, dass man für jede Spalte 3 Spalten definieren muß. Das hört sich auch sehr aufwändig an... Es muß doch eine Möglichkeit geben, einen normalen Responsive Table zu benutzen, bei dem trotzdem das Padding berücksichtigt wird. Wenn ich class="table table-bordered" einfüge, dann ist auch das Padding da. Nehme ich es heraus, klebt die Schrift an der Tabelle. Das will doch keiner haben, oder? Wäre schön, wenn man da eine andere Lösung finden könnte... Vielen Dank, Ute Bursian
Schau Dir doch einfach mal im Gambio-Testshop eine Tabelle an. z.B. hier: (Link nur für registrierte Nutzer sichtbar.) unter Spezifikationen. Wenn Du dich da als Admin anmeldest, hast Du doch den ganzen Quellcode der Tabelle und kannst den so ausbauen, wie Du ihn brauchst.
vielen Dank Barbara für die schnelle Antwort. Noch eine Frage - in dem Beispiel, dass Du nennst kommt <div class="table-responsive"> gar nicht vor. Brauche ich das dann gar nicht? Sorry, bin halt HTML Anfänger... Vielen Dank, Ute
Also meine Tabelle auf der Startseite bricht jetzt um wie sie es soll, wenn man den Browser verkleinert und hat auch das Padding. Sieht auf dem Desktop prima aus. Allerdings wenn ich mit meinem Handy unseren Shop aufrufe, sind 2 der 3 Bilder, die ich in der Tabelle eingefügt habe, um 90° gedreht. Im Desktop sind alle 3 Bilder richtig (aufrecht, nicht gedreht). Hast Du eine Idee? Unser Shop ist www.die-wein-gourmets.com Vielen Dank, Ute
Wenn ich Deine Seite mit meinem Tablet aufrufen möchte kommt Dies ist keine sichere Verbindung Wenn ich die Seite trotzdem öffne und auf das rote Dreieck klicke kommt Ungültiges Zertifikat nicht mehr verwenden. gedrehte Bilder sehe ich aber keine.
also das mit der nicht sicheren Verbindung erscheint für uns (zum Glück) mit keinem unserer Geräte. Mein Mann hat nochmal mit seinem Laptop und mit seinem Handy versucht - ohne Sicherheitswarnung. Insofern hoffe ich jetzt einfach mal dass zumindest für die meisten Kunden das nicht erscheint. Bzgl. der gedrehten Bilder - das ist weder auf unserem Tablet noch auf dem Handy von meinem Mann der Fall. Ich habe so ein uraltes iPhone, wahrscheinlich liegt es daran. Also ignoriere ich das jetzt auch einfach mal. Auf jeden Fall sieht es jetzt auf dem Desktop gut aus. Also nochmal vielen Dank für Deine Hilfe! Ute
das selbe Problem habe ich auch. Habe die Tabelle vom Testshop kopiert und funktioniert auch alles, doch ich möchte noch die Häkchen haben und weiß nicht wie ich das anstellen soll. Im Anhang ein Bild wie es bei mir im Shop aussieht.