Tabellen
Tabellen können Text oder andere Komponenten enthalten. Die einzelnen Zeilen werden in der Standardansicht mit weißem Hintergrund dargestellt. Die einzelnen Zeilen werden durch eine 1px Linie abgegrenzt. Wird eine Tabelle zu breit für einen Viewport, kann horizontal gescrollt werden.
Standard Tabelle
#
First
Last
Handle
1
Mark
Otto
@mdo
2
Jacob
Thornton
@fat
3
Larry
the Bird
@twitter
Striped rows
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | the Bird | |
| 4 | Harry | Cat | @rev |
Info
Hintergrund even: #ffffff
Hintergrund odd: Grau 100
#
First
Last
Handle
1
Mark
Otto
@mdo
2
Jacob
Thornton
@fat
3
Larry
the Bird
@twitter
4
Harry
Cat
@rev
Hover rows
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | the Bird | |
| 4 | Harry | Cat | @rev |
Info
Hintergrund hover: #dee1e4
#
First
Last
Handle
1
Mark
Otto
@mdo
2
Jacob
Thornton
@fat
3
Larry
the Bird
@twitter
4
Harry
Cat
@rev
Ereignis Klassen
| Aktiv | Cell | Cell | Cell |
|---|---|---|---|
| Default | Cell | Cell | Cell |
| Positiv / Erfolgreich | Cell | Cell | Cell |
| Hinweis / Achtung | Cell | Cell | Cell |
| Warnung / Fehler | Cell | Cell | Cell |
| Informieren | Cell | Cell | Cell |
Info
Aktiv: #dee1e4
Positiv: #cbe6c8
Hinweis: #fceab8
Warnung: #f5c6cb
Info: #b8e9ff
Aktiv
Cell
Cell
Cell
Default
Cell
Cell
Cell
Positiv / Erfolgreich
Cell
Cell
Cell
Hinweis / Achtung
Cell
Cell
Cell
Warnung / Fehler
Cell
Cell
Cell
Informieren
Cell
Cell
Cell
Small Table
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the Bird | ||
Info
Zellen Innenabstand: 8px / 16px
#
First
Last
Handle
1
Mark
Otto
@mdo
2
Jacob
Thornton
@fat
3
Larry the Bird
@twitter
Beispiel Komponenten
| ID | Name | Produkt Informationen | ||
|---|---|---|---|---|
|
|
145587 | Produktmuster |
|
ID
Name
Produkt Informationen
145587
Produktmuster