Tabelle, sortier-, filter- und scrollbar
Tabelle, schmale Zellen
Tabelle, mit langen Tabellen-Zellen-Überschriften
Lange Textlabels in den Tabellen-Zellen-Überschriften
|
Name / Firma / Adresse / Eingabemöglichkeit
|
Text
|
Lange Überschrift mit langem Text
|
Kürzere Überschrift
|
| Atiam porttitor risus eros |
Etiam porttitor risus eros |
Etiam porttitor risus eros |
Etiam porttitor risus eros |
| Etiam porttitor risus eros |
Etiam porttitor risus eros |
Etiam porttitor risus eros |
Etiam porttitor risus eros |
| Itiam porttitor risus eros |
Etiam porttitor risus eros |
Etiam porttitor risus eros |
Etiam porttitor risus eros |
| Utiam porttitor risus eros |
Etiam porttitor risus eros |
Etiam porttitor risus eros |
Etiam porttitor risus eros |
Tabelle, 5 Zeilen pro Seite
Tabelle, 3 Zeilen pro Seite, ohne Tabellenüberschrift
Tabelle, 3 Zeilen pro Seite
Tabelle, kein Header
Tabelle, erste Spalte als zusätzliche Titelspalte
Tabelle, nur erste Spalte als Titelspalte
Tabelle, nur sortierbar
Tabelle, nur filterbar
Tabelle, filterbar und sortierbar
Tabelle, scrollbar und filterbar
Tabelle, keine Caption, filter- und scrollbar
Tabelle, keine Caption, nicht filter-/scrollbar
Tabelle mit vielen Inhalten, scrollbar
Tabelle, keine Caption, nur filterbar
Tabellen im Fliesstext
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras auctor eleifend rhoncus. Nam leo felis, congue eget metus aliquam, mattis porttitor augue. Mauris nec venenatis nisi, nec faucibus lacus. Suspendisse eu quam iaculis, varius neque id, sodales lectus. Donec felis purus, convallis id.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras auctor eleifend rhoncus. Nam leo felis, congue eget metus aliquam, mattis porttitor augue. Mauris nec venenatis nisi, nec faucibus lacus. Suspendisse eu quam iaculis, varius neque id, sodales lectus. Donec felis purus, convallis id.
Keine Inhalte
|
Name / Firma
|
Strasse Nr
|
PLZ Ort
|
Tel
|
E-Mail
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras auctor eleifend rhoncus. Nam leo felis, congue eget metus aliquam, mattis porttitor augue. Mauris nec venenatis nisi, nec faucibus lacus. Suspendisse eu quam iaculis, varius neque id, sodales lectus. Donec felis purus, convallis id.
Viel Textinhalt in einer Spalte
|
Name / Firma
|
Text
|
| Hans Meier |
Etiam porttitor risus eros, ut porta sapien scelerisque pulvinar. Donec vitae risus euismod, consequat tellus at, condimentum massa. Nunc et condimentum lectus. Proin ultricies quis quam nec tincidunt. Pellentesque ac ligula at neque tincidunt vehicula. Cras elementum dapibus ipsum at faucibus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed quis mi nec dolor maximus ultrices. Cras at luctus libero. Maecenas vel est maximus, placerat lacus non, egestas purus. Suspendisse eget tortor et nulla ornare venenatis. |
| Petra Schneider |
Nullam dictum, odio vitae malesuada molestie, leo ante fringilla massa, a rutrum ipsum ante tristique ante. Curabitur ac dolor cursus, volutpat massa id, luctus felis. Mauris id tellus luctus, rutrum mi eu, accumsan nisi. Duis ut vestibulum massa. Fusce porta condimentum vulputate. Mauris maximus imperdiet nisi. Pellentesque efficitur accumsan blandit. Phasellus ut est enim. Integer ullamcorper dictum sem, in consequat justo mollis non. Donec sollicitudin gravida tellus nec sollicitudin. Nam semper justo ex, nec faucibus ante viverra vel. Proin vitae commodo neque. |
| Karl Klammer |
Cras mauris est, consectetur at dignissim id, dignissim vel tellus. Fusce mollis ligula libero, quis iaculis augue efficitur sit amet. Nulla rutrum semper venenatis. Etiam diam elit, placerat at nisi eu, tincidunt vestibulum tortor. Duis posuere sapien vitae ex fringilla, at auctor leo ullamcorper. Ut tempor risus non suscipit pellentesque. Vivamus consequat nisi et posuere lacinia. Donec viverra porta enim, non feugiat nisi ultricies a. Donec non euismod dolor, a porttitor lectus. Ut in cursus arcu, dignissim porta enim. Vivamus mi mauris, venenatis eleifend venenatis eu, dapibus ut lectus. Morbi interdum tincidunt lorem, at luctus sem egestas vel. In mattis lacus quis orci malesuada congue. Vivamus eget pharetra massa. Phasellus maximus ante a felis dignissim, et venenatis tortor venenatis. |
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras auctor eleifend rhoncus. Nam leo felis, congue eget metus aliquam, mattis porttitor augue. Mauris nec venenatis nisi, nec faucibus lacus. Suspendisse eu quam iaculis, varius neque id, sodales lectus. Donec felis purus, convallis id.
Richtext-Inhalte in einer Spalte (mit einer sehr langen Caption, zum Testen was passiert, wenn diese viel zu lang wird und ggf. unschön umbricht.
|
Name / Firma
|
Text
|
Hans Meier mit einem Beispiel eines internen Links |
- Praesent in dolor a ipsum porta cursus id accumsan arcu.
- Praesent in dolor a ipsum porta cursus id accumsan arcu. Praesent interdum sed justo id tempor. Pellentesque pulvinar metus id vestibulum fermentum. Proin eu bibendum turpis. Aliquam sollicitudin augue sit amet dolor aliquet, in porta orci tristique. Sed finibus quis tortor eget consectetur. Praesent nec blandit nisl. Integer nisl nulla, semper ac ultrices id, euismod vitae mauris. Pellentesque sapien sem, fermentum nec magna et, viverra auctor risus. Proin consectetur magna feugiat pulvinar aliquam. Aenean nec condimentum enim, id gravida ligula. Ut a bibendum dolor, aliquam tincidunt urna. In id mi in nisi accumsan viverra. Nulla eu eros ut risus volutpat finibus euismod non dui.
|
Hans Meier |
- Praesent in dolor a ipsum porta cursus id accumsan arcu. Praesent interdum sed justo id tempor. Pellentesque pulvinar metus id vestibulum fermentum. Proin eu bibendum turpis. Aliquam sollicitudin augue sit amet dolor aliquet, in porta orci tristique. Sed finibus quis tortor eget consectetur. Praesent nec blandit nisl. Integer nisl nulla, semper ac ultrices id, euismod vitae mauris. Pellentesque sapien sem, fermentum nec magna et, viverra auctor risus. Proin consectetur magna feugiat pulvinar aliquam. Aenean nec condimentum enim, id gravida ligula. Ut a bibendum dolor, aliquam tincidunt urna. In id mi in nisi accumsan viverra. Nulla eu eros ut risus volutpat finibus euismod non dui.
- Praesent in dolor a ipsum porta cursus id accumsan arcu. Praesent interdum sed justo id tempor. Pellentesque pulvinar metus id vestibulum fermentum. Proin eu bibendum turpis. Aliquam sollicitudin augue sit amet dolor aliquet, in porta orci tristique. Sed finibus quis tortor eget consectetur. Praesent nec blandit nisl. Integer nisl nulla, semper ac ultrices id, euismod vitae mauris. Pellentesque sapien sem, fermentum nec magna et, viverra auctor risus. Proin consectetur magna feugiat pulvinar aliquam. Aenean nec condimentum enim, id gravida ligula. Ut a bibendum dolor, aliquam tincidunt urna. In id mi in nisi accumsan viverra. Nulla eu eros ut risus volutpat finibus euismod non dui.
|
| Karl Klammer |
Beispiel eines externen Links und Beispiel eines lokalen Links und Beispiel eines E-Mail-Links und Beispiel eines Dateilinks. Cras mauris est, consectetur at dignissim id, dignissim vel tellus. Fusce mollis ligula libero, quis iaculis augue efficitur sit amet. Nulla rutrum semper venenatis. Etiam diam elit, placerat at nisi eu, tincidunt vestibulum tortor. Duis posuere sapien vitae ex fringilla, at auctor leo ullamcorper. Ut tempor risus non suscipit pellentesque. Vivamus consequat nisi et posuere lacinia. Donec viverra porta enim, non feugiat nisi ultricies a. Donec non euismod dolor, a porttitor lectus. Ut in cursus arcu, dignissim porta enim. Vivamus mi mauris, venenatis eleifend venenatis eu, dapibus ut lectus. Morbi interdum tincidunt lorem, at luctus sem egestas vel. In mattis lacus quis orci malesuada congue. Vivamus eget pharetra massa. Phasellus maximus ante a felis dignissim, et venenatis tortor venenatis. |
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras auctor eleifend rhoncus. Nam leo felis, congue eget metus aliquam, mattis porttitor augue. Mauris nec venenatis nisi, nec faucibus lacus. Suspendisse eu quam iaculis, varius neque id, sodales lectus. Donec felis purus, convallis id.
Tabelle im Look einer Liste
Mit dem Modifier table--list werden Tabellen im Look eine Liste dargestellt. Die Textgrösse entspricht Standardtext
Tabellenüberschrift mit mehreren Worten
|
Vorname
|
Nachname
|
ID
|
Datum
|
Einnahmen
|
Link
|
| Max |
Mustermann |
5387 |
22.08.2016 |
2'444.20 |
Link zum Profil |
| Marianne |
Schuster |
93487 |
20.04.2011 |
3'444.20 |
Link zum Profil |
| Paul |
Umland |
59348 |
04.01.1981 |
1'444.20 |
Link zum Profil |
| Peter |
Ohnmacht |
|
12.12.2016 |
1'544.20 |
Link zum Profil |
Tabelle mit Flip-to-List verhalten auf Mobile
Mit dem Modifier table__wrapper--fliptolist wird aus einer Tabelle auf kleinen Bildschirmen eine Liste Charakter eine Liste von Datensätzen.
Tabellenüberschrift mit mehreren Worten
|
Vorname
|
Nachname
|
ID
|
Datum
|
Einnahmen
|
Link
|
| Max |
Mustermann |
5387 |
22.08.2016 |
2'444.20 |
Link zum Profil |
| Marianne |
Schuster |
93487 |
20.04.2011 |
3'444.20 |
Link zum Profil |
| Paul |
Umland |
59348 |
04.01.1981 |
1'444.20 |
Link zum Profil |
| Peter |
Ohnmacht |
|
12.12.2016 |
1'544.20 |
Link zum Profil |
Tabellen mit Aktionen (SVG Icons)
Tabelle mit Aktionen
In der rechten Spalte sind Aktionen verfügbar.
| Maria |
Bernasconi |
|
| Markus |
Mischler |
|
| Björn |
Beispiel |
|
Tabelle als Liste mit Aktionen
Die Tabelle erhält den Modifier .table--list um im Look einer Liste zu erscheinen. In der rechten Spalte sind Aktionen verfügbar.
| Maria |
Bernasconi |
|
| Markus |
Mischler |
|
| Björn |
Beispiel |
|
Tabelle als Liste mit Aktionen und mit Flip-to-List verhalten auf Mobile
Mit dem Modifier table__wrapper--fliptolist wird aus einer Tabelle auf kleinen Bildschirmen eine Liste Charakter eine Liste von Datensätzen. In der rechten Spalte sind Aktionen verfügbar.
|
Name
|
Vorname
|
Aktionen
|
| Maria |
Bernasconi |
|
| Markus |
Mischler |
|
| Björn |
Beispiel |
|
Tabellen im Formular