WebSite X5Help Center

 
Michael G.
Michael G.
User

Umbruch Tabelle responsiv  de

Autore: Michael G.
Visite 2425, Followers 1, Condiviso 0  

Hallo,

ich habe ein Problem mit der Tabelle in der kleinen Ansicht.

Ich habe den Code verwendet

<style> table {word-break: break-word;} </style>
<script> $( document ).ready(function() { $("table").css("width", "");}); </script>

Schöner wäre es wenn die Buchstaben nebeneinander bleiben würden und nicht untereinander wie auf dem Bild

Postato il
17 RISPOSTE - 5 UTILI - 1 CORRETTO
Andreas S.
Andreas S.
Moderator
Utente del mese DE

Wenn es sich nicht ausgeht in der Spalte kann es auch nicht in der gleichen Zeile angezeigt werden. Wenn dann musst du es wieder ohne Code versuchen mit Scrollbalken, dann wird alles in der Zeile angezeigt.

Leggi di più
Postato il da Andreas S.
Michael G.
Michael G.
User
Autore

Ich habe aber eine Website gesehen (keine von X5) da funktioniert das.

Das passt sich der Text flexibel an

Leggi di più
Postato il da Michael G.
Michael G.
Michael G.
User
Autore

Oder gibt es einen anderen Code?

Leggi di più
Postato il da Michael G.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Utente del mese ESUtente del mese PT
Michael G.
Hallo, ich habe ein Problem mit der Tabelle in der kleinen Ansicht. Ich habe den Code verwendet <style> table {word-break: break-word;} </style> <script> $( document ).ready(function() { $("table").css("width", "");}); </script> Schöner wäre es wenn die Buchstaben nebeneinander bleiben würden und nicht untereinander wie auf dem Bild

(It > De) ... der Code, den du benutzt hast, ist eine Erfindung von mir vor ein paar Jahren,
gemacht für WebSiteX5, die Tische "elastisch" machen;
... kann sein, gegebenenfalls Einige Varianten oder Anpassungen des Codes ...
... ich, um beurteilen zu können, Ich muss den LINK der Seite sehen, und dann werde ich dich wissen lassen, damit sich etwas ändert ...

Hallo, ciao

.

Leggi di più
Postato il da  ‪ KolAsim ‪ ‪
Michael G.
Michael G.
User
Autore

https://zeltsysteme-goebel.de/sternzelt-jehlan.html

Das ist die Seite aber ohne den Code. Den Code hatte ich nur auf einer Testseite probiert und da es nicht schön aussah habe ich das nicht hochgeladen. Vielleicht geht das auch so, ansonsten muss ich die Testseite laden

Leggi di più
Postato il da Michael G.
Cookie G.
Cookie G.
User

Hallo Michael

Probier mal diesen. 

<style>
@media screen and (max-width:959px) {
  div[id^='imTableObject_'] {
    overflow-x: auto !important;
}
 table {
    width: auto !important;
  }
}
</style>

959px musst du ändern, wenn deine Seite breiter ist als 960!

Gruss

Cookie

Leggi di più
Postato il da Cookie G.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Utente del mese ESUtente del mese PT
Michael G.
https://zeltsysteme-goebel.de/sternzelt-jehlan.html Das ist die Seite aber ohne den Code. Den Code hatte ich nur auf einer Testseite probiert und da es nicht schön aussah habe ich das nicht hochgeladen. Vielleicht geht das auch so, ansonsten muss ich die Testseite laden

... für den ersten Tisch, der mit sieben Spalten:

<style>
@media (max-width: 1249px){
#imTableObject_41_492_tab0 {overflow-x: hidden !important; }
#imTableObject_41_492_tab0 table {width:100% !important;word-break: break-word;}
#imTableObject_41_492_tab0 table * {width:100% }
#imTableObject_41_492_tab0 table td:nth-child(1) {width:20% !important;}
#imTableObject_41_492_tab0 table tr:nth-child(3) td {vertical-align: top;}}
@media (max-width: 480px){
#imTableObject_41_492_tab0 {overflow-x: scroll !important;}
table,table td{width:100% !important;word-break: break-word;font-size:11px !important}}
</style>

.

ciao

.

Leggi di più
Postato il da  ‪ KolAsim ‪ ‪
Michael G.
Michael G.
User
Autore

Danke für die Codes

@Cookie: Dein Code funkitoniert fast, die Tabelle verschiebt sich wie es sein soll aber es bleibt immer noch ein Scrollbalken bei kleiner Ansicht

@KolAsim: Dein Code funktioniert auch fast, aber bei kleiner Ansicht (kleiner als 480px) werden die Bilder nicht schön und der Text ist wieder nicht richtig, siehe Bild im Anhang
und bei Ansicht 1 Zwischen 1249 und 960px werden die Bilder zu groß und verpixeln 

Leggi di più
Postato il da Michael G.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Utente del mese ESUtente del mese PT
Michael G.
... ... ...  @KolAsim: Dein Code funktioniert auch fast, aber bei kleiner Ansicht (kleiner als 480px) werden die Bilder nicht schön und der Text ist wieder nicht richtig, siehe Bild im Anhang und bei Ansicht 1 Zwischen 1249 und 960px werden die Bilder zu groß und verpixeln 

<!-- ====== K ==\|/==== -->
<style>
/** =========== erste Tabelle (1) =============== **/
@media (max-width: 1249px) and (min-width: 960px) {
#imCell_492 div {overflow-x: hidden !important; }
#imTableObject_41_492_tab0 table {width:100% !important;word-break: break-all;}
#imTableObject_41_492_tab0 table td {width:100% }
#imTableObject_41_492_tab0 table td:nth-child(1) {width:30% !important;}
#imTableObject_41_492_tab0 table tr:nth-child(3) td {vertical-align: top;}}
@media (max-width: 959px) and (min-width: 480px) {
#imCell_492 div {overflow-x: hidden !important; }
#imTableObject_41_492_tab0 table {width:100% !important;word-break: break-word;}
#imTableObject_41_492_tab0 table * {width:100% }
#imTableObject_41_492_tab0 table td:nth-child(1) {width:22% !important;}
#imTableObject_41_492_tab0 table tr:nth-child(3) td {vertical-align: top;}}
@media (max-width: 480px){
#imCell_492 *{font-size:11px !important;overflow-x: hidden !important; margin:0px !important;padding:0px !important}
#imTableObject_41_492_tab0 table {width:100% !important;word-break: break-word;}
#imTableObject_41_492_tab0 table td {width:13% !important;}
#imTableObject_41_492_tab0 table img {width:100% !important;}
#imTableObject_41_492_tab0 table td:nth-child(1) {width:22% !important;}
#imTableObject_41_492_tab0 table tr:nth-child(3) td {vertical-align: top;}}
/** =========== zweite Tabelle (2) =============== **/
@media (max-width: 1249px) {
#imCell_337 div {overflow-x: hidden !important; }
#imTableObject_41_337_tab0 table {width:100% !important;word-break: break-word;}
#imTableObject_41_337_tab0 table td {width:50% !important;}}
</style>
<!-- ====== K ==/|\==== -->

.

Leggi di più
Postato il da  ‪ KolAsim ‪ ‪
Michael G.
Michael G.
User
Autore

Das sieht schon mal gut aus, danke....

Der Scrollbalken bei der Tabelle ist jetzt noch da, bei der Ansicht zwischen 1249 und 960

Leggi di più
Postato il da Michael G.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Utente del mese ESUtente del mese PT
Michael G.
Das sieht schon mal gut aus, danke.... Der Scrollbalken bei der Tabelle ist jetzt noch da, bei der Ansicht zwischen 1249 und 960

... ich sehe nur meinen Code für das proportionierte Menü ...
... Ich sehe meinen Code für die beiden Tabellen nicht, daher kann ich nicht auswerten ...
... vielleicht ersetzen:
#imCell_492 div {overflow-x: hidden !important; }
... mit:
#imCell_492, #imCell_492 div {overflow-x: hidden !important; }

.

Leggi di più
Postato il da  ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Utente del mese ESUtente del mese PT
Michael G.
Das geht leider immer noch nicht bei manchen Ansichten. ... ... 

...!... ... Fehler in Zeilennummer 115 des Codes, wie im beigefügten STAMP zu sehen:

.

Leggi di più
Postato il da  ‪ KolAsim ‪ ‪
Michael G.
Michael G.
User
Autore

ok das sieht schon mal sehr gut aus danke schön.

Jetzt müsste die Schrift nur noch bei der Ansicht zwischen 959 und 480 kleiner werden, diese hat jetzt noch Originalgröße (Homepage noch nicht hochgeladen)

Bei Ansicht Kleiner als 480 ist die Schrift sehr gut

Leggi di più
Postato il da Michael G.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Utente del mese ESUtente del mese PT
Michael G.
... ...  Jetzt müsste die Schrift nur noch bei der Ansicht zwischen 959 und 480 kleiner werden, ... ...

+ >  font-size:14px !important;    (14, 13, 12, ...!...)

#imTableObject_41_492_tab0 table * {width:100% }

... ▼ ...

#imTableObject_41_492_tab0 table * {width:100%; font-size:14px !important;}

.

ciao

.

Leggi di più
Postato il da  ‪ KolAsim ‪ ‪
Michael G.
Michael G.
User
Autore

Super danke schön, kann ich diesen Code für alle Tabellen auf der Website verwenden? Oder muss ich da was anderes eintragen?

Leggi di più
Postato il da Michael G.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Utente del mese ESUtente del mese PT

(It > De)  ... wenn die Tabelle das einzige Objekt der Zeile ist, dann würde einfach der erste Code ausreichen, den ich erfunden habe:
<style> table {word-break: break-word;} </style>
<script> $( document ).ready(function() { $("table").css("width", "");}); </script>
...
... andernfalls müssen Sie, um diesen erweiterten Code anzupassen, im Code der Seite den Selektor (name div ID) der Referenz angeben ...
... in diesem Fall befinden sich Ihre beiden Tabellen in der DIV #imCell_492 und der DIV #imCell_337

.

Leggi di più
Postato il da  ‪ KolAsim ‪ ‪