Text in Tabellen im Responsive Design 
Autore: Holger A.Hallo miteinander,
gibt es eine Möglichkeit, die Textgrösse an die Skalierung einer Tabelle im Responsive Design anzupassen?
Ähnlich scheint dies möglich, wenn Tabellen ohne Responsive Design (also bei nur vorliegender Desktop-Seite) auf kleineren Displays dargestellt werden. Hier verkleinerte sich bei meinen Versuchen die Schriftgrösse (fehlerfrei) entsprechend auf mehreren Geräten mit unterschiedlichen Displaygrössen.
Bereits erfolgreich konnte ich via (hier gefundenem) code festlegen, dass sich die Tabellen im Responsive Design an die Displaygrösse anpassen, der Text passt sich jedoch in seiner Grösse nicht an. In Bezug auf die Texte selbst ist das kein Problem, da diese ja umbrechen - die jeweiligen grösseren Überschriften passen allerdings u.U. nicht mehr ins Bild, was sehr hässlich aussieht. Wenn ich die Überschriften entsprechend manuell verkleinere habe ich logischerweise in der Desktop-Variante dann zu kleine Überschriften.
Vielen Dank im Voraus!
Hattest Du diese Lösung https://helpcenter.websitex5.com/it/post/216213 gefunden? Da wird auch ganz unten die Anpassung der Textgröße erwähnt.
(It > De) ... der Link der Seite mit der Tabelle könnte helfen, Probleme mit meinem Code für die von Franz-Josef H.
angegebene elastische Tabelle zu erkennen ...
... alternativ können Sie eine Tabelle im Bildformat verwenden ...
.
ciao
.
Autore
Vielen Dank!
Ich habe versucht, den Code passend zu integrieren, hänge allerdings an den Zeilen. Eingefügt ist die Code - Zeile "#imTableObject_XX_XXX_tab0 table * {width:100%; font-size:14px !important;}. Allerdings habe ich nun das Problem, dass ich entweder mit "table *" die Schrift beider Zeilen kleiner skaliere oder mit "tr" oder "td" die untere Zeile skaliere, nicht aber die obere Zeile mit der Überschrift. (Anbei zwei Screenshots / oben jeweils das Ergebnis und darunter ein eingefügter Screenshot des Codes).
Könnt Ihr mir sagen, was ich hier falsch mache?
Wieder Danke im Voraus!
Was passiert wenn Du beim zweiten Bild " td" durch "tr" ersetzt?
Autore
Bei beiden verkleinert sich die Schrift in Zeile 2. Die Überschrift bekomme ich nur mit * klein. Dann ist aber die ganze Tabelle betroffen...
Eventuell th statt td für den Header?
Autore
Habe ich auch schon probiert. Ich doktore den ganzen Nachmittag bereits daran rum und komme einfach auf keine Lösung. Das Table-Header-Attribut ändert nichts - weder in Zeile 1 noch 2, die Schrift bleibt dann im Urprungszustand der Desktopseite.
Ich hatte auch die Tabelle gelöscht, "frisch hinterlegt" und alle Attribute nochmals durchprobiert. U.a. auch in Kombination. Ebenfalls ohne Erfolg. Die Tatsache, dass sich das Skalieren auf eine einzelne Zeile anwenden lässt, lässt mich jedoch nicht aufhören, darüber nachzugrübeln... Ist mir wirklich ein Rätsel.
Autore
Es ändert auch nichts, eine weitere Zeile (oberhalb der Überschrift) hinzuzufügen, skaliert wird stets nur die unterste Zeile.
(It > De) ... wie im vorigen Link erwähnt, kann ich nur über echte Online-Links bewerten ...
... so setzen Sie den Link Ihrer Seite, sie wissen also, was Sie tun und Sie sparen viel Zeit ...
ciao
.
Autore
Danke nochmal - die Seite ist derzeit nicht online bzw. gerade gesperrt. Es handelt sich dabei um eine (bei unseren Stammgästen relativ bekannte) Seite für Ferienwohnungen, die ich gerade in ein neues Design bringe. Daher ich muss ich die einzusehenden Parts erst einigermassen "präsentationstauglich" machen, bevor ich sie online stellen kann. Ich melde mich, sobald ich soweit bin.
Autore
Ich habe nun noch eine Alternative gefunden, die mir wesentlich einfacher scheint.
@ KolAsim
Ich habe von Dir aus einem 2017er Post einen Code gefunden, der das Skalieren von Texten möglich macht. Wenn ich nun anstatt der oben erwähnten Tabelle ein Textobjekt anlege, kann ich den Code darauf anpassen. In meinen Fall wäre dies nun auf der oben erwähnten Seite anstatt der Tabelle ein Textobjekt mit der Überschrift und der Beschreibung darunter: Bei Deinem Code habe ich vor den "*" die Angabe des gewünschten Textobjektes gesetzt. Das sieht dann so aus:
<style> @media screen and (max-width: 1149px) { #imTextObject_39_tab0 * {font-size: 16px !important;}} </style>
Was ich bisher nicht herausfinden konnte, ist die Möglichkeit, sich nicht auf das ganze Textobjekt zu beziehen, da dann beide Schriftarten (der Überschrift und der Beschreibung) darunter auf die gleiche Grösse skaliert werden (auch mit Einheiten, wie "em" oder"%"). Stattdessen würde ich die beiden unterschiedlichen Fonts gerne einzeln ansprechen bzw. skalieren.
Meine Frage - geht das?
Danke im Voraus!
Autore
Hallo miteinander,
ich habe es über die Text-Objekte nun - ohne Kompromisse machen zu müssen - lösen können. Hierbei habe ich das eine Textobjekt mit Überschrift und Beschreibung in zwei Textobjekte aufgeteilt, die horizontalen Abstände zwischen den Textobjekten entfernt (da sonst der Abstand zwischen Überschrift (Objekt 1) und Beschreibung (Objekt 2) zu gross gewesen wäre) und den Code jeweils separat auf die Objekte mit unterschiedlichen Skalierungsgrössen angewendet. Das Ergebnis ist bei einer Verkleinerung nun perfekt (anbei ein Screenshot zur verkleinerten Variante).
An dieser Stelle nochmals vielen Dank an @KolAsim für den Ursprungscode und @Franz-Josef H. für den Link und die Impulse!!
... ideal zum Lösen ...
...
... ohne den LINK kann man nicht bewerten ...
... für echte Tests können Sie die Tests vorübergehend in ein Unterverzeichnis oder nach Altervista exportieren ...
... am Beispiel von Marketplace > Blossom Corner können Sie diese Anpassung jedoch mit EXTRA-Code mit folgendem Code erhalten:
... code:
#imTextObject_02_tab0 .fs12lh1-5{color:red;font-size:24px; font-style: italic;}
#imTextObject_02_tab0, #imTextObject_02_tab0 .ff1 {font-family: 'Arial';color:blue;}
#imTextObject_02_tab0 .imCssLink{color: green;font-family: 'Satisfy'}
.
hallo, ciao
.