logologo

Bootstrap Basic Tables

Basic Table With Border Bottom Color

use a classtable-*.border-bottom-*class for Border bottom color

Id First Name Last Name Username Designation Company Language Country
1 profileRam Jacob Wolfe RamJacob@twitter Developer Apple Inc. Php IND
2 profileJohn Deo Gummer JohnDeo@twitter Designer Hewlett packard Html US
3 profileElana John Cazale ElanaJohn@twitter Designer Microsoft Pug UK
4 Meryl Streep Roberts MerylStreep@twitter Developer Tata Ltd. React IDN
5 Emma Stone Stone EmmaStone@twitter Developer Wipro Ltd. Vue IRN
6 Eliana Jons Jons ElianaJons@twitter Developer Info Ltd. Vue IRN
7 Ram Jacob Ottandy ElianaJons@twitter Developer Info Ltd. Vue IRN

Inverse Table

use a class.table-inverseinside table element.

Id First Name Last Name Office Position Salary Join Date Age
1 Stephan Laiten Tokyo Accountant $2100.00 21/01/2022 20
2 Fay Van Damme London CEO $1420.00 14/02/2022 22
3 Brevin Oleveria New York Software Engineer $1340.00 04/06/2022 18
4 Regina Ottandy France Pre-sale Support $3400.00 10/08/2022 25
5 Vani Shah Los Angeles Senior Developer $3500.00 23/07/2022 28

Hoverable Rows With Horizontal Border

Hoverable row use a classtable-hover-*.table-border-horizontal-*.border-solid-*class.

Id Status Signal Name Security Stage Schedule Team Lead
1
No Signal 		Astrid: NE Shared managed Medium Triaged 0.33 Chase Nguyen
2
Offline 		Cosmo: prod shared ares Huge Triaged 0.39 Brie Furman
3
Online 		Phoenix: prod shared lyra-lists Minor No Triaged 3.12 Jeremy Lake
4
No Signal 		Astrid: NE Shared managed Negligible Triaged 13.18 Angelica Howards
5 Online Astrid: NE Shared managed Medium No Triaged 5.33 Diane Okuma

Inverse Table with Primary background

use a class.bg-info, .bg-success, .bg-warning and .bg-danger classes.To set the light background color use .bg-[color] class where [color] is the value of your selected color from stack color palette. So for teal color background class will be .bg-teal

Id First Name Last Name Company Credit Volume Username Role Country
1 Ram Jacob Wolfe Apple Inc. $3500.00 RamJacob@twitter Developer IND
2 John Deo Gummer Hewlett packard $2400.00 JohnDeo@twitter Designer US
3 Elana John Wolfe Microsoft $2560.00 ElanaJohn@twitter Designer UK
4 Meryl Streep Roberts Tata Ltd. $1870.00 MerylStreep@twitter Developer IND
5 Emma Stone Stone Wipro Ltd. $4580.00 EmmaStone@twitter Developer IRN
6 Eliana Jons Jons Info Ltd. $4580.00 ElianaJons@twitter Developer IRN

Caption

A<caption>functions like a heading for a table. It helps users with screen readers to find a table and understand what it’s about and decide if they want to read it.

List of users
Id Employee Name Email Experience Sex Contact No. Age
1 Elana Robbert ElanaRob@gmail.com 1 Year Male +91 9789887777 28
2 Stiphen Deo Stiphen@yahoo.com 6 Month Female +91 9874563210 22
3 Genelia Ottre Genelia@gmail.com 2 Days Male +91 8794562135 24

Table head options

Similar to tables,use the modifier classes.table-[color]-*thead-*appear in any color.

Id First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Striped Row with Inverse Table

use a class.table-striped to add zebra-striping to any table row within the This styling does not work in IE8 and below as :nth-child CSS selector is not supported.

Id Dessert Calories Fat Price
1 KitKat 518 26 20
2 Donut 452 25 80
3 Eclair 262 16 10

Breckpoint Specific

use.table-responsive"❴-sm|-md|-lg|-xl|-xxl❵"functions like a heading for a table. It helps users with screen readers to find a table and understand what it is about and decide if they want to read it.

Id Name Order Id Price Quantity Total
1 Iphone X Grey C12345 $12550 1 $1255
2 Titan Watch A14725 $120 2 $250
3 Apple Airpods B54213 $210 1 $210

Responsive Tables With Light Background

A.table-responsive-*.table-light-*inside table element.

Id Task Email Phone Assign Date Price Status Progress
1 Web Development Pixel@efo.com +91 7874226671 Mark Jecno 12/07/2022 $2315.00 Pending 75%
2 Graphic Design Strap@google.com +91 8347855785 Elana John 23/08/2022 $4125.00 Pending 45%
3 WordPress Pixelstrap@gmail.com +91 635609347 John Deo 15/04/2022 $6123.00 Done 100%

Sizing Tables

Example of Extra large table Add.table-xl-*.table-lg-*.table-de-*.table-sm -*to create a table.

Id Employee Name Date Status Hours Performance
1 Mark Jecno 22/08/2022 On leave 0 29/30
2 Elana Robbert 21/08/2022 Present 10 30/30
3 John Deo 18/08/2022 On leave 8 28/30

Custom Table Color With Hover And Stripped

Use classtable-hover, table-striped table-*table-info,table-success,table-success,table-info,table-danger,table-primary,table-secondary,table-light,table-activeinside table element.

Id Film Title Released Studio Budget Domestic Gross
1 Frozen 2013 Disney $150,000,000 $400,953,009
2 Minions 2015 Universal $74,000,000 $336,045,770
3 Zootopia 2016 Disney $150,000,000 $341,268,248
4 Finding Dory 2016 Disney Pixar $175,000,000 $486,295,561
5 Toy Story 3 2010 Disney Pixar $200,000,000 $415,004,880

Dashed Border

Dashed border use class.table-dashed-*.table-dotted-*.table-Double-*for Dotted border & Double border.

Id Classname Type Hours Trainer Spots
1 Crit Cardio Gym 9:00 AM - 11:00 AM Aaron Chapman 10
2 Zumba Dance Dance 8:00 AM - 9:00 AM Donna Wilson 12
3 Like a butterfly Boxing 9:00 AM - 10:00 AM Randy Porter 13
4 Pilates Reformer Gym 7:00 AM - 8:30 AM Aaron Chapman 15
5 Mind & Body Yoga 8:00 AM - 9:00 AM Adam Stewart 20