Umbruch Tabelle responsiv 
Auteur : Michael G.
Visité 2307,
Followers 1,
Partagé 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
Posté le
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.
Auteur
Ich habe aber eine Website gesehen (keine von X5) da funktioniert das.
Das passt sich der Text flexibel an
Auteur
Oder gibt es einen anderen Code?
(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
.
Auteur
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
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
... 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
.
Auteur
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
<!-- ====== 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 ==/|\==== -->
.
Auteur
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; }
.
Auteur
Das geht leider immer noch nicht bei manchen Ansichten.
Ich habe den Test mal hochgeladen
https://zeltsysteme-goebel.de/test/sternzelt-jehlan.html
...!... ... Fehler in Zeilennummer 115 des Codes, wie im beigefügten STAMP zu sehen:
.
Auteur
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
+ > 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
.
Auteur
Super danke schön, kann ich diesen Code für alle Tabellen auf der Website verwenden? Oder muss ich da was anderes eintragen?
(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
.