Jonathan DoeBasic Tables
Basic Tables
Show your datas with Kode Tables.
Make them simple and user-friendly. Also responsive.
- Responsive
- Style Options
- Based on Bootstrap Tables
Default Table
For basic styling—light padding and only horizontal dividers—add the base class .tableto 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.
| Order ID | Product | Buyer | Date | Order Note | Payment | |
| # 9652 | Kode Gaming Laptop | John Doe | 12/10/2015 | As we got further and further away, it [the Earth] diminished in size. Finally it shrank to the size of a marble, the most beautiful you can imagine. | Credit Card | |
| # 1963 | New Season Jacket | Jane Doe | 12/10/2015 | As we got further and further away, it [the Earth] diminished in size. Finally it shrank to the size of a marble, the most beautiful you can imagine. | Paypal | |
| # 9652 | IO Mouse | Jonathan Doe | 12/10/2015 | As we got further and further away, it [the Earth] diminished in size. Finally it shrank to the size of a marble, the most beautiful you can imagine. | Credit Card | |
| # 9651 | Doe Bike | Jonathan Doe | 12/10/2015 | As we got further and further away, it [the Earth] diminished in size. Finally it shrank to the size of a marble, the most beautiful you can imagine. | Credit Card | |
| # 6962 | Zets Baseball Bat | Jonathan Doe | 12/10/2015 | As we got further and further away, it [the Earth] diminished in size. Finally it shrank to the size of a marble, the most beautiful you can imagine. | Credit Card |
Striped rows
Use .table-stripedto add zebra-striping to any table row within the <tbody>.
| Order ID | Product | Buyer | Date | Order Note | Payment |
| # 9652 | Kode Gaming Laptop | John Doe | 12/10/2015 | As we got further and further away, it [the Earth] diminished in size. | Credit Card |
| # 1963 | New Season Jacket | Jane Doe | 12/10/2015 | As we got further and further away, it [the Earth] diminished in size. | Paypal |
| # 9652 | IO Mouse | Jonathan Doe | 12/10/2015 | As we got further and further away, it [the Earth] diminished in size. | Credit Card |
| # 9651 | Doe Bike | Jonathan Doe | 12/10/2015 | As we got further and further away, it [the Earth] diminished in size. | Credit Card |
| # 6962 | Zets Baseball Bat | Jonathan Doe | 12/10/2015 | As we got further and further away, it [the Earth] diminished in size. | Credit Card |
Bordered table
Add .table-borderedfor borders on all sides of the table and cells.
| Order ID | Product | Buyer | Date | Order Note | Payment |
| # 9652 | Kode Gaming Laptop | John Doe | 12/10/2015 | As we got further and further away, it [the Earth] diminished in size. | Credit Card |
| # 1963 | New Season Jacket | Jane Doe | 12/10/2015 | As we got further and further away, it [the Earth] diminished in size. | Paypal |
| # 9652 | IO Mouse | Jonathan Doe | 12/10/2015 | As we got further and further away, it [the Earth] diminished in size. | Credit Card |
| # 9651 | Doe Bike | Jonathan Doe | 12/10/2015 | As we got further and further away, it [the Earth] diminished in size. | Credit Card |
| # 6962 | Zets Baseball Bat | Jonathan Doe | 12/10/2015 | As we got further and further away, it [the Earth] diminished in size. | Credit Card |
Contextual classes
Use contextual classes to color table rows or individual cells.
| Class | Description |
|---|---|
.active | Applies the hover color to a particular row or cell |
.success | Indicates a successful or positive action |
.info | Indicates a neutral informative change or action |
.warning | Indicates a warning that might need attention |
.danger | Indicates a dangerous or potentially negative action |
| Order ID | Product | Buyer | Date | Order Note | Payment |
| # 9652 | Kode Gaming Laptop | John Doe | 12/10/2015 | As we got further and further away, it [the Earth] diminished in size. | Credit Card |
| # 1963 | New Season Jacket | Jane Doe | 12/10/2015 | As we got further and further away, it [the Earth] diminished in size. | Paypal |
| # 9652 | IO Mouse | Jonathan Doe | 12/10/2015 | As we got further and further away, it [the Earth] diminished in size. | Credit Card |
| # 9651 | Doe Bike | Jonathan Doe | 12/10/2015 | As we got further and further away, it [the Earth] diminished in size. | Credit Card |
| # 6962 | Zets Baseball Bat | Jonathan Doe | 12/10/2015 | As we got further and further away, it [the Earth] diminished in size. | Credit Card |
James ThrowingLas Vegas
Fred StonefieldNew York
Chris M. JohnsonCalifornia
Allice MinghamLos Angeles
James ThrowingLas Vegas