Borderless Table
For basic styling—light padding and only horizontal dividers—add the base class .table to any<table> It may seem super redundant, but given the widespread use of tables for other plugins like calendars and date pickers, we've opted to isolate our custom table styles.
| Name | Item Name | Item Price |
|---|---|---|
| Alvin | Eclair | $0.87 |
| Alan | Jellybean | $3.76 |
| Jonathan | Lollipop | $7.00 |
striped
Use .striped to add zebra-striping to any table row within the
.| Name | Item Name | Item Price |
|---|---|---|
| Alvin | Eclair | $0.87 |
| Alan | Jellybean | $3.76 |
| Jonathan | Lollipop | $7.00 |
centered
Use .centered to add zebra-striping to any table row within the
.| Name | Item Name | Item Price |
|---|---|---|
| Alvin | Eclair | $0.87 |
| Alan | Jellybean | $3.76 |
| Jonathan | Lollipop | $7.00 |
bordered
Use .bordered to add zebra-striping to any table row within the
.| Name | Item Name | Item Price |
|---|---|---|
| Alvin | Eclair | $0.87 |
| Alan | Jellybean | $3.76 |
| Jonathan | Lollipop | $7.00 |
bordered centered stripped
Use .bordered centered stripped to add zebra-striping to any table row within the
.| Name | Item Name | Item Price |
|---|---|---|
| Alvin | Eclair | $0.87 |
| Alan | Jellybean | $3.76 |
| Jonathan | Lollipop | $7.00 |
bordered stripped
Use .bordered stripped to add zebra-striping to any table row within the
.| Name | Item Name | Item Price |
|---|---|---|
| Alvin | Eclair | $0.87 |
| Alan | Jellybean | $3.76 |
| Jonathan | Lollipop | $7.00 |
Aione Table
| Name | Item Name | Item Price |
|---|---|---|
| Alvin | Eclair | $0.87 |
| Alan | Jellybean | $3.76 |
| Jonathan | Lollipop | $7.00 |
Aione Table: Compact
Use .compact stripped to add zebra-striping to any table row within the
| Name | Item Name | Item Price |
|---|---|---|
| Alvin | Eclair | $0.87 |
| Alan | Jellybean | $3.76 |
| Jonathan | Lollipop | $7.00 |
Aione Table: wide
Use .wide stripped to add zebra-striping to any table row within the
.| Name | Item Name | Item Price |
|---|---|---|
| Alvin | Eclair | $0.87 |
| Alan | Jellybean | $3.76 |
| Jonathan | Lollipop | $7.00 |
Contextual classes
Use contextual classes to color table rows or individual cells.
| Class | Description |
|---|---|
| .aione-message | Applies the simple row or cell |
| .aione-message .success | Indicates a successful or positive action |
| .aione-message .warning | Indicates a warning that might need attention |
| .aione-message .error | Indicates a error that might need attention |