nicht angemeldet
Klassische Tabelle umwandeln in responsive Darstellung
0 
Rolf B
0 0 
MudGuard
0 
JürgenB
0 
Auge
0 0 0 
Gunnar Bittersmann
0
Klassische Tabelle umwandeln in responsive Darstellung
Moin,
ich habe eine Tabelle mit Zeilen der Art
<tr>
<td>BL</td>
<td>55762</td>
<td>Bezeichnung</td>
<td>50</td>
<td>50310</td>
<td>Lagerort</td>
<td>Datum</td>
<td>Art</td>
</tr>
Edit Rolf B: Als HTML formatiert, Zeilenumbrüche
Wie kann ich dies darstellen, dass es auch auf schmalen Displays richtig interpretierbar ist?
-
Hallo Henning,
wir haben dazu im Wiki einen Artikel: Responsive Gestaltung von Tabellen
Und Gunnar hat vor 4 Jahren das Thema auch mal durchdekliniert: Sind Tabellen responsiv?
Rolf
--
sumpsi - posui - obstruxi-
Hallo Rolf,
ich habe das Beispiel in Wiki wie folgt geändert<!DOCTYPE html> <html> <head> <style> table { border-collapse: collapse; } td, th { padding: 1em; } th:first-child { padding-left: .5em; } th:last-child, td:last-child { padding-right: .5em; } thead th { border: 1px solid blue; } tbody td { border: 1px dashed red; } tbody th { font-weight: normal; text-align: left; }</style> </head> <body> <table> <thead> <tr> <th><a href="">Text1</a></th> <th><a href="">Zahl1</a></th> <th><a href="">Text2</a></th> <th><a href="">Zahl2</a></th> <th><a href="">Zahl3</a></th> <th><a href="">Text4</a></th> <th><a href="">Text5</a></th> <th><a href="">Text6</a></th> </tr> </thead> <tbody> <tr> <td>xx<td/> <td>999999<td/> <td>aaaaaaaaaaaa<td/> <td>12<td/> <td>123456<td/> <td>bbbbbbbb<td/> <td>3434<td/> <td>xp<td/> </tr> </tbody> </body> </html>Ergebnis ist
Woher kommen dies Leere Zellen?
-
Hi,
<th><a href="">Text1</a></th> <td>xx<td/>Vergleiche die Zeilenenden.
cu,
Andreas a/k/a MudGuard -
Hallo Henning,
<td>xx<td/>Woher kommen dies Leere Zellen?
vom / an der falschen Stelle, versuch mal
<td>xx</td>Gruß
Jürgen-
Danke, war wohl ein Blackout von mir!
-
-
Hallo
als Ergänzung, um die Erklärung für den von MudGuard und Jürgen aufgezeigten Fehler zu nennen.
<table> <tbody> <tr> <td>xx<td/> <td>999999<td/> <td>aaaaaaaaaaaa<td/> <td>12<td/> <td>123456<td/> <td>bbbbbbbb<td/> <td>3434<td/> <td>xp<td/> </tr> </tbody> </body> </html>Mit
<td>öffnest du eine Tabellenzelle mit Inhalt. Mit<td/>öffnest du eine weitere Zelle ohne Inhalt. Der HTML-Parser des Browsers schließt dabei das vorherige Element, also die Zelle mit Inhalt und so generiert<td>12<td/>zwei Tabellenzellen statt der gewünschten einen Zelle.Ach übrigens, im Quelltext in deinem Posting fehlt das schließende Tag für die Tabelle. Bitte schaue im Originalcode nach, ob es dort vorhanden ist.
Tschö, Auge
--
„Habe ich mir das nur eingebildet, oder kann der kleine Hund wirklich sprechen?“ fragte Schnapper. „Er behauptet, nicht dazu imstande zu sein“ erwiderte Victor. Schnapper zögerte (…) „Nun …“ sagte er schließlich, „ich schätze, er muss es am besten wissen.“ Terry Prattchett, Voll im Bilde-
Auch danke!
-
Hallo,
jetzt habe ich doch noch eine Frage. Wenn ich vor die Tabelle z.B. noch eine Überschrift stelle (<h1>....), so wird die auch verschoben, wenn ich die Tabelle verschiebe (z.B. durch Wischen).Wie kann ich erreichen, dass alles außer der Tabelle immer im Viewport bleibt?
In der Hoffnung, dass der alte Thread noch gelesen wird, schönen Gruß
Henning
-
@@Henning
Wie kann ich erreichen, dass alles außer der Tabelle immer im Viewport bleibt?
In der Hoffnung, dass der alte Thread noch gelesen wird,
Wir lesen den Thread schon noch. Die Frage ist, ob du ihn denn liest.
Deine Frage wurde schon lange beantwortest, bevor du sie überhaupt gestellt hattest. Rolf B verwies vor einer Woche auf ein 4 Jahre altes Posting von mir, welches auf ein noch älteres Posting von mir verweist.
Jolan tru
--
Wenn der Faschismus wiederkehrt, wird er nicht sagen „Hallo, ich bin der Faschismus.“ Er wird sagen: „Ich suche in diesem Deutschen Bundestag keine anderen Mehrheiten als die in der demokratischen Mitte. Wenn es heute eine solche Mehrheit gegeben hat, bedauere ich das.“ (Friedrich Merz)-
Sorry,
aber ich sehe in den zitierten Beiträgen nur immer einzelne Code-Schnipsel zum Thema Responsive Tabellen, nicht aber, wie man die Tabelle nach rechts/links scrollen kann, ohne dass der übrige Inhalt fest bleibt.-
@@Henning
aber ich sehe in den zitierten Beiträgen nur immer einzelne Code-Schnipsel zum Thema Responsive Tabellen, nicht aber, wie man die Tabelle nach rechts/links scrollen kann, ohne dass der übrige Inhalt fest bleibt.
Oh, ich dachte, da wären Links zu Codepens in den verlinkten Postings. Ha, sind ja auch!
Im Posting wird auf diesen und jenen Codepen verwiesen. Wenn du die Umschaltung auf andere Darstellung auf schmalen Viewports nicht willst, dann lass halt den
@media-Block weg.Wir hatten letztens diesen Thread, in welchem ich ein Beispiel einer horizontal scrollenden Tabelle gezeigt hatte. Dort mit feststehenden Zeilenköpfen. Wenn du die nicht willst, dann lass halt das
position: sticky; left: 0weg.Jolan tru
--
Wenn der Faschismus wiederkehrt, wird er nicht sagen „Hallo, ich bin der Faschismus.“ Er wird sagen: „Ich suche in diesem Deutschen Bundestag keine anderen Mehrheiten als die in der demokratischen Mitte. Wenn es heute eine solche Mehrheit gegeben hat, bedauere ich das.“ (Friedrich Merz) -
Mal ein Beispiel zum Ausprobieren, vielleicht hilft dir das weiter:
<!DOCTYPE html> <html lang="de"> <head> <meta charset="utf-8"> <title>Tabelle scrollbar</title> <meta name="description" content="Platzhalter - Ein kurze Beschreibung des Inhalts in Satzform"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> .tabscroll { overflow-x: scroll; } .tabscroll table { width: 100%; border-collapse: collapse; } .tabscroll th, .tabscroll td { padding: 8px; text-align: left; } .tabscroll th { background-color: #eee; } .tabscroll td { border-bottom: 1px solid #ddd; } .tabscroll tr:nth-child(even) td { background-color: #f2f2f2; } </style> </head> <body> <main> <h1>Überschrift</h1> <p>In der Webentwicklung ist die Darstellung von Tabellendaten eine häufige Anforderung. Manchmal können jedoch Tabellen so breit sein, dass sie den sichtbaren Bereich des Bildschirms überschreiten. In solchen Fällen ist es wichtig, eine Lösung zu finden, um den gesamten Tabelleninhalt darzustellen, ohne dass Informationen abgeschnitten werden. Eine scrollbare Tabelle ist die Lösung für ein responsives Webdesign! In diesem Blogpost werde ich dir zeigen, wie du eine scrollbare Tabelle in deine Webseite einfügst und warum sie so praktisch ist.</p> <section class="tabscroll"> <table> <thead> <tr> <th>Name</th> <th>Alter</th> <th>Stadt</th> <th>Land</th> <th>Telefonnummer</th> <th>Email</th> <th>Webseite</th> </tr> </thead> <tbody> <tr> <td>Max Mustermann</td> <td>28</td> <td>Berlin</td> <td>Deutschland</td> <td>030 1234567</td> <td>max-mustermann@example.com</td> <td>www.maxmustermann.de</td> </tr> <tr> <td>Maria Musterfrau</td> <td>32</td> <td>Hamburg</td> <td>Deutschland</td> <td>040 1234567</td> <td>maria.musterfrau@example.com</td> <td>www.mariamusterfrau.de</td> </tr> </tbody> </table> </section> </main> <footer> <p>Originaldiskussion: <a href="https://forum.selfhtml.org/self/2025/mar/12/klassische-tabelle-umwandeln-in-responsive-darstellung/1819258#m1819258">https://forum.selfhtml.org/</a></p> </footer> </body> </html>-
Super! das ist ein optimales Beispiel, auf dem ich aufbauen kann. Besten Dank!
-
-
-
-
-
-
-
-
