nicht angemeldet
Klassische Tabelle umwandeln in responsive Darstellung
Rolf B
MudGuard
JürgenB
AugeMoin,
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
-
-
