Chance
Themenersteller
Programmierer
Guru (173 Beiträge)
HTML 5, Tabellen und Mobile Geräte
Bin im Moment ein wenig am grübeln...
Ich habe ein Tabelle, welche auch auf mobilen Geräten gut ausgegben werden soll.
Die eine Möglichkeit wäre eine li Variante: jquerymobile.com/demos/1.1.0/docs/lists/lists-formatting.html .
Wodurch die Tabellen Semantic verloren geht, also z.B. ID | Name | Aktiv ? .
Und mir erschließt sich nicht direkt die Semantic dieser Variante.
Die li Auflistung und die Ãœberschrift mal vorweggenommen... mir fehlt die direkte Zuordnung.
Auch auf Lesegeräten für körperlich eingeschränkte Menschen.
Die zweite Möglichkeit wäre, die Tabellen mit jQuery und CSS anzupassen.
Die dritte, verschiedene Templates für Normal und Mobil zu erstellen.
gambler
Student
Guru (101 Beiträge)
Hallo,
mit dem Thema habe ich mich im Zusammenhang mit Responsive Design vor kurzem auch gerade beschäftigt und an sich gibt es diverse Möglickeiten Responsive Tabellen zu erstellen.
Die Variante die ich verwendet habe, nutzt ein zusätzliches data-Attribut, welches für jede Spalte definiert wird und den jeweiligen Tabellen-Kopf enthält:
[html]
Kategorie |
Aktueller Monat |
Vormonat |
Vergleich Vormonat |
|---|
Artikel |
10 |
1 |
- |
Kommentare |
0 |
0 |
- |
[/html]
Das dazugehörige CSS:
[css]
@media all and (max-width:640px) {
.postTable, .postTable thead, .postTable tbody, .postTable tr, .postTable th, .postTable td {
display: block;
}
.postTable {
text-align: right;
}
.postTable thead {
position: absolute;
top: -1111px;
left: -1111px;
}
.postTable td:before {
float: left;
padding: 0 10px 0 0;
content: attr(data-label) ":";
}
.postTable td:nth-child(1) {
font-weight: bold;
}
.postTable td:nth-child(1) {
font-weight: bold;
}
.postTable td:last-child {
border-bottom: 5px #d4e7ee solid;
}
}
[/css]
Generell bleibt so die Semantik erhalten, auch wenn dafür etwas mehr Code-Overhead nötig ist (bzgl. zusätzlichen data-Attributen).
Es gibt aber auch diverse andere Möglichkeiten - siehe CSS-Tricks.com
edit: URLs korrigiert...
Gruß Stephan
Belegungsplan Ferienwohnung
Blog: Smart-Webentwicklung
Chance
Programmierer
Guru (173 Beiträge)
Eine gute Idee und Hilfe.
Allerdings beinhalten meine Tabellen z.T. Links, da Sie zur Auflistung verschiedener auswähbarer Inhalte dienen, z.B. wie bei einer Userliste.
Daher werde ich je nach fall enscheiden, und für die Listenlösung nach einer Optimirung recherchieren.
Das Seitenreport Forum hat aktuell 5275 Themen und 36110 Beiträge.
Insgesamt sind 48360 Mitglieder registriert.
Beitrag erstellen
EinloggenKostenlos registrieren