Basic Tables

statistics, charts and events

  1. Dashboard
  2. Basic Tables
Basic Table

Use basic bootstrap classes .table to any <table>

ID Name Salary Country
1 Bob Williams $23,566 USA
2 Mike Tyson $10,200 Canada
3 Tim Cook $32,190 Netherlands
4 Philip Morris $31,432 UK
5 Tom Hooper $28,768 India
6 Hulk Hogan $43,201 Netherlands
7 Angelina Jolie $12,239 Australia
Striped Table

Use .table-striped to add zebra-striping to any table row in <tbody>.

ID First Name Last Name Username
1 Bob Williams @bobw
2 Mike Tyson @miketyson
3 Tim Cook @timck
4 Philip Morris @philmorris
5 Tom Hooper @timhoop
6 Hulk Hogan @hulkhog
7 Angelina Jolie @angel
Bordered Table

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

ID Title Progress Deadline Actions
1 Probe Project
80% Complete
May 15, 2015 settings clear
2 Office Automatized
30% Complete
May 15, 2015 settings clear
3 Dream successful Project
50% Complete
May 15, 2015 settings clear
4 The sunclim bing plain
90% Complete
May 15, 2015 settings clear
4 Dream successful Project
40% Complete
May 15, 2015 settings clear
6 Open strategy
50% Complete
May 15, 2015 settings clear
Hover Table

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

Invoice User Amount Date Status
Order#21249 Harman Beck $35.22 May 15, 2015 Paid
Order#34572 Mary Adams $75.82 May 12, 2015 Cancel
Order#78878 Caleb Richard $45.22 May 15, 2015 Pending
Order#67686 June Lane $90.23 May 19, 2015 Error
Order#67378 Lisa Roy $23.67 April 19, 2015 Paid
Order#67567 John Doe $47.12 April 28, 2015 Pending
Condensed Table

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

ID Name Salary Country
1 Bob Williams $23,566 USA
2 Mike Tyson $10,200 Canada
3 Tim Cook $32,190 Netherlands
4 Philip Morris $31,432 UK
5 Tom Hooper $28,768 India
6 Hulk Hogan $43,201 Netherlands
Contextual Classes

Use contextual classes to color table rows or individual cells.

ID First Name Last Name Username
2 Mike Tyson @miketyson
3 Tim Cook @timck
4 Philip Morris @philmorris
5 Tom Hooper @timhoop
1 Bob Williams @bobw
Primary Table

Use bootstrap classes thead

Name Salary Country
Bob Williams $23,566 USA
Mike Tyson $10,200 Canada
Tim Cook $32,190 Netherlands
Inverse Background Table

Add bootstrap background classes to each tr

Name Salary Country
Bob Williams $23,566 USA
Mike Tyson $10,200 Canada
Tim Cook $32,190 Netherlands
Full Info Table and Hover

Add .full-color-table.table-hover

Name Salary Country
Bob Williams $23,566 USA
Mike Tyson $10,200 Canada
Tim Cook $32,190 Netherlands