HTML 5, Tabellen und Mobile Geräte
Startbeitrag
Archivierter Thread aus dem Seitenreport-Forum.
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.
Antworten
2 BeiträgeHallo,
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
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.