Tables

Basic Tables

Here's an example of a basic table, with no classes added.

#	First Name	Last Name	Team
87	Sydney	Crosby	Penguins
97	Connor	McDavid	Oilers
8	Alex	Ovechkin	Capitals
91	John	Tavares	Islanders
8	Brent	Burns	Sharks


    
        
            #
            First Name
            Last Name
            Team
        
    
    
        
            87
            Sydney
            Crosby
            Penguins

And for a nice touch add the small heading classes to your heading cells.

#	First Name	Last Name	Team
87	Sydney	Crosby	Penguins
97	Connor	McDavid	Oilers
8	Alex	Ovechkin	Capitals
91	John	Tavares	Islanders
8	Brent	Burns	Sharks


    
        
            #
            First Name
            Last Name
            Team

Striped Tables

Use the class table-striped to add zebra-striping to any table row within the <tbody>.

#	First Name	Last Name	Team
87	Sydney	Crosby	Penguins
97	Connor	McDavid	Oilers
8	Alex	Ovechkin	Capitals
91	John	Tavares	Islanders
8	Brent	Burns	Sharks

Bordered Tables

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

#	First Name	Last Name	Team
87	Sydney	Crosby	Penguins
97	Connor	McDavid	Oilers
8	Alex	Ovechkin	Capitals
91	John	Tavares	Islanders
8	Brent	Burns	Sharks

Hover Rows

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

#	First Name	Last Name	Team
87	Sydney	Crosby	Penguins
97	Connor	McDavid	Oilers
8	Alex	Ovechkin	Capitals
91	John	Tavares	Islanders
8	Brent	Burns	Sharks

Condensed Tables

For a more tight and compact look, add the class table-condensed.

#	First Name	Last Name	Team
87	Sydney	Crosby	Penguins
97	Connor	McDavid	Oilers
8	Alex	Ovechkin	Capitals
91	John	Tavares	Islanders
8	Brent	Burns	Sharks

And again, for a nice touch combine this with the small heading classes.

#	First Name	Last Name	Team
87	Sydney	Crosby	Penguins
97	Connor	McDavid	Oilers
8	Alex	Ovechkin	Capitals
91	John	Tavares	Islanders
8	Brent	Burns	Sharks


    
        
            #
            First Name
            Last Name
            Team

Contextual Classes

You can add any of the contextual classes to your table rows or cells.

#	First Name	Last Name	Team
87	Sydney	Crosby	Penguins
97	Connor	McDavid	Oilers
8	Alex	Ovechkin	Capitals
91	John	Tavares	Islanders
8	Brent	Burns	Sharks


    
        
            #
            First Name
            Last Name
            Team
        
    
    
        
            87
            Sydney
            Crosby
            Penguins
        
        
            97
            Connor
            McDavid
            Oilers
        
        
            8
            Alex
            Ovechkin
            Capitals
        
        
            91
            John
            Tavares
            Islanders
        
        
            8
            Brent
            Burns
            Sharks

Color Library

Similarly to how you can use contextual color classes, you can also use any class from the color library.

#	First Name	Last Name	Team
87	Sydney	Crosby	Penguins
97	Connor	McDavid	Oilers
8	Alex	Ovechkin	Capitals
91	John	Tavares	Islanders
8	Brent	Burns	Sharks


    
        
            #
            First Name
            Last Name
            Team
        
    
    
        
            87
            Sydney
            Crosby
            Penguins
        
        
            97
            Connor
            McDavid
            Oilers
        
        
            8
            Alex
            Ovechkin
            Capitals
        
        
            91
            John
            Tavares
            Islanders
        
        
            8
            Brent
            Burns
            Sharks

Inverse Tables

To use light text on a dark background, add class table-inverted.

#	First Name	Last Name	Team
87	Sydney	Crosby	Penguins
97	Connor	McDavid	Oilers
8	Alex	Ovechkin	Capitals
91	John	Tavares	Islanders
8	Brent	Burns	Sharks

#	First Name	Last Name	Team
87	Sydney	Crosby	Penguins
97	Connor	McDavid	Oilers
8	Alex	Ovechkin	Capitals
91	John	Tavares	Islanders
8	Brent	Burns	Sharks

Responsive Tables

One crucial thing missing from all of the table examples above is the responsiveness. Of course we want our tables to display nicely on mobile devices. So to create responsive tables, wrap 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.

#	First Name	Last Name	Team
87	Sydney	Crosby	Penguins
97	Connor	McDavid	Oilers
8	Alex	Ovechkin	Capitals
91	John	Tavares	Islanders
8	Brent	Burns	Sharks