Basic Tables

  1. Home
  2. Tables
  3. Basic

Basic

Add class .table.

# First Name Last Name Username Role
1 Teagan Prohaska @Elijah admin
2 Andy Gaylord @Ramiro member
3 Veronica Gusikowski @Maxime developer
4 Bruce Rogahn @Maggio supporter
5 Carolina Hickle @Hammes member
6 Madaline Eichmann @Amaya supporter

Hover Table

Add.table-hoverto enable a hover state on table rows within a<tbody>

# Products Popularity Sales
1 Milk Powder 5,3,2,-1,-3,-2,2,3,4,1 28.76%
2 Air Conditioner 1,-1,-2,1,2,1,0,1,3,2 8.55%
3 RC Cars 3,2,3,-1,-3,-1,0,2,4,5 58.56%
4 Down Coat 1,-2,0,2,4,5,3,2,3,5 35.76%
5 SLR Camera 1,-1,0,2,3,1,-1,1,4,2 21.13%
6 Jacket 4,2,-1,-3,-2,1,3,5,2,4 26.88%

Bordered Table

Add.table-borderedfor borders on all sides of the table and cells.

Task Progress Deadline Action
Lunar probe project
May 15, 2017
Dream successful plan
July 1, 2017
Office automatization
Apr 12, 2017
The sun climbing plan
Aug 9, 2017
Open strategy
Apr 2, 2017
Tantas earum numeris
July 11, 2017

Striped Rows

Use.table-stripedto add zebra-striping to any table row within the<tbody>.Striped tables are styled via the:nth-childCSS selector, which is not available in Internet Explorer 8.

Order ID Username Payment Amount
2569 @Jessica Credit Card $256.10
4582 @William Paypal $96.75
2563 @Jennifer Credit Card $458.00
4378 @Rolando Paypal $30.25
8465 @Katelin Credit Card $158.50
1526 @Richard Paypal $58.80

Condensed Table

Add.table-smto make tables more compact by cutting cell padding in half.

Invoice Username Amount Date
Order #53451 Mary Adams $24.98 2017/7/26
Order #53452 Caleb Richards $564.00 2017/7/15
Order #53453 June Lane $58.87 2017/7/01
Order #53454 Crystal Bates $97.50 2017/6/26
Order #53455 Heather Harper $249.99 2017/6/09
Order #53456 Willard Wood $24.98 2017/6/01

Table Section

Project Progress Date
Project #25369 Canceled July 10, 2017
##MODULE-1111 Done July 27, 2017
##MODULE-723 Done July 7, 2017
##MODULE-4200c Done July 12, 2017
Project #28686 Testing July 12, 2017
##MODULE-3100c Doing July 25, 2017
##MODULE-6400 Done July 24, 2017
##MODULE-2210 Done July 22, 2017
Project #29587 Developing July 15, 2017
##MODULE-7400 Done July 2, 2017
##MODULE-510c Done July 3, 2017
##MODULE-3a00 Done July 17, 2017

Table Selectable

Id Project Status Progress
619 The sun climbing plan Developing 5,3,2,-1,-3,-2,2,3,5,2
620 Lunar probe project Design 1,-1,0,2,3,1,-1,1,4,2
621 Dream successful plan Testing 2,3,-1,-3,-1,0,2,4,5,3
622 Office automatization Canceled 1,-2,0,2,4,5,3,2,4,2
623 Open strategy Reply waiting 4,2,-1,-3,-2,1,3,5,2,4

Responsive

Create responsive tables by wrapping any .table in .table-responsive to make them scroll horizontally on small devices (under 768px). When viewing on anything larger than 768px wide, you will not see any difference in these tables.

Invoice User Date Amount Status Country
Order #26589 Herman Beck Oct 16, 2017 $45.00
Paid
EN
Order #58746 Mary Adams Oct 12, 2017 $245.30
Shipped
CN
Order #98458 Caleb Richards May 18, 2017 $38.00
Shipped
AU
Order #32658 June Lane Apr 28, 2017 $77.99
Paid
FR

Contextual Classes

Use classes( .table-active, .table-success, .table-info, .table-warning, .table-danger ) to color table rows or individual cells.

Order ID Order note Product Buyer payment Date
# 259648 As we got further and further away, it [the Earth] diminished in size. Kode Gaming Laptop Crystal Bates Credit Card 5/10/2017
# 486524 Tantas earum numeris, scribi innumerabiles quietae clariora. New Season Jacket Nathan Watts Paypal 5/11/2017
# 985632 Metum quieti agatur ut sequitur delectatio accusamus. IO Mouse Ronnie Ellis Credit Card 5/16/2017
# 159853 Incorrupte torquatum animi nudus, pendet fugiamus pariter. Doe Bike Daniel Russell Paypal 5/22/2017
# 753698 Opes oculis forte omnisque virtute caecilii ceterorum. Zets Baseball Bat Sarah Graves Credit Card 5/28/2017
# 154789 Supplicii nominavi studiose sequimur vidisse. Air Condition Camila Lynch Paypal 6/10/2017
# 321489 Amentur pellat sinat commemorandis Vivatur. DSLR Ramon Dunn Credit Card 6/19/2017
# 568741 Applies the hover color to a particular row or cell. Camping Bag Scott Sanders Paypal 6/23/2017
# 369852 Indicates a dangerous or potentially negative action. Jogging Shoes Nina Wells Credit Card 6/25/2017

Bootstrap Table Examples

Bootstrap Table Example

State Text
50% 		$45.00 5,3,9,6,5,9,7,3,5,2,5,3,2,-1,-3,-2,2,3,5,2,0,-3,-6,-4,-5,-4,-7,-3,-5,-2 Florida (50%)
Value Revene for last quarter in state America.
30% 		$245.30 0,-2,5,-4,-5,-4,-3,-6,-7,-2,3,3,6,9,5,2,5,3,5,7,8,5,4,8,2,-2,2,5,7,4 NULL(0%)
Assignee Text example here lorem ipsum
70% 		$38.00 5,3,2,-1,-3,-2,2,3,5,2,5,3,9,6,5,9,7,3,5,2,0,-3,-6,-4,-5,-4,-7,-3,-5,-2 Florida (70%)
Data Create Lorem ipsum dolor sit amet
70% 		$77.99 8,5,4,8,2,-2,2,5,7,4,3,3,6,9,5,2,5,3,5,7,0,-2,5,-4,-5,-4,-3,-6,-7,-2 Florida (13%)
In Progress Caleb Richards
60% 		$77.99 0,-3,-6,-4,-5,-4,-7,-3,-5,-2,5,3,9,6,5,9,7,3,5,2,5,3,2,-1,-3,-2,2,3,5,2 NULL(60%)
state Applies the hover color
30% 		$77.99 3,3,6,9,5,2,5,3,5,7,8,5,4,8,2,-2,2,5,7,4,0,-2,5,-4,-5,-4,-3,-6,-7,-2 NULL(0%)
Value Office automatization
40% 		$77.99 5,3,2,-1,-3,-2,2,3,5,2,5,3,9,6,5,9,7,3,5,2,0,-3,-6,-4,-5,-4,-7,-3,-5,-2 Florida (40%)
In Progress Caleb Richards
50% 		$77.99 5,3,9,6,5,9,7,3,5,2,5,3,2,-1,-3,-2,2,3,5,2,0,-3,-6,-4,-5,-4,-7,-3,-5,-2 NULL(0%)

23 Reports

Name Description Date Created
Last quarter revene Revene for last quarter in state America for year 2013, whith... 6 minets ago
Expenses in 2013 Revene for last quarter in state America. 2 hourss ago
Accounting Text example here lorem ipsum 5 hours ago
Srtarbucks orders Lorem ipsum dolor sit amet 12 hours ago
In Progress Lorem ipsum dolor sit amet 3 days ago