Basic - Tables
Stripped Table
They (allegedly) aid usability in reading tabular data by offering the user a coloured means of separating and differentiating rows from one another.
Simply add the class.table-striped
|
|
First Name | Last Name | Status |
|---|---|---|---|
|
|
Mark | Otto | ALERT! |
|
|
Jacob ALERT! | Thornton | WORK |
|
|
Larry | the Bird | ALERT! |
Hover Table
Hover tables is addition option that allows you to see what row you selected, this helps to see all the columns in that row. Use the following class to toggle this option
.table-hover
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the Bird | ||
Bordered Table
Old is gold, here is old fashion bordered table, we tweaked it a bit so that the headings looks more prominent.
As shown in all of the examples these tables are made to handle extra elements like small buttons, labels and even charts in it.
By using the class .table-bordered. You can mix all the above mention classes to bring a unique table design
|
|
Month | Sales | Graph |
|---|---|---|---|
|
|
January | $ 50,000.00 | |
|
|
February | $ 10,000.00 | |
|
|
March | $ 85,000.00 | |
|
|
April | $ 56,000.00 | |
|
|
May | $ 98,000.00 |
