Table

Bootstrap 4 Table with Material Design UI

The HTML table model allows authors to arrange data - text, preformatted text, images, links, forms, form fields, other tables, etc. into rows and columns of cells. Table is an ubiquitous feature of most user interfaces, regardless of a site's content or function. It's design and use is therefore an important factor in the overall user experience.

Botstrap Table Propeller Table Propeller Table with Highlighted Heading Propeller Table with Caption Card Table Nested Table Striped Rows Table Bordered Table Borderless Table Hoverable Rows Table Small Table Contextual Table Dark Table Reflow Table Table with Expand/Collapse Table with Fixed Header Responsive Table Breakpoint Specific Responsive Table Configuration Options

Bootstrap 4 Table

Bootstrap 4 provides table with its own custom table styles. This simple table can be also converted to table with striped rows, bordered table, table with hover rows, condensed table, table with contextual classes, responsive table, breakpoint-specific responsive table and a table with highlighted header.

Name Code State/City End Date of Work Status Timesheet
Giacomo Guilizzoni JONEA140 Melbourne 1 June 2014 Active Timesheet
Giacomo Guilizzoni JONEA140 Melbourne 1 June 2014 Active Timesheet
Giacomo Guilizzoni JONEA140 Melbourne 1 June 2014 Active Timesheet
Giacomo Guilizzoni JONEA140 Melbourne 1 June 2014 Active Timesheet
Giacomo Guilizzoni JONEA140 Melbourne 1 June 2014 Active Timesheet
Giacomo Guilizzoni JONEA140 Melbourne 1 June 2014 Active Timesheet 

                        

                        
                    
 
                    
                    
                    

                    
                        
                        
Propeller Table

                        
The Propeller Table is an enhanced version of the Bootstrap 4 standard HTML <table>. Include .pmd-table followed by .table to use Propeller table.

                        
        
                        
                        
                            
 
                                

                                    
                                        

                                            Name
                                            Code
                                            State/City  
                                            End Date of Work
                                            Status
                                            Timesheet
                                            
                                        

                                    
                                    
                                        

                                            Giacomo Guilizzoni
                                            JONEA140
                                            Melbourne
                                            1 June 2014
                                            Active
                                            Timesheet
                                            more_vert
                                        

                                        

                                            Giacomo Guilizzoni
                                            JONEA140
                                            Melbourne
                                            1 June 2014
                                            Active
                                            Timesheet
                                            more_vert
                                        

                                        

                                            Giacomo Guilizzoni
                                            JONEA140
                                            Melbourne
                                            1 June 2014
                                            Active
                                            Timesheet
                                            more_vert
                                        

                                        

                                            Giacomo Guilizzoni
                                            
                                            Melbourne
                                            1 June 2014
                                            Active
                                            Timesheet
                                            more_vert
                                        

                                        

                                            Giacomo Guilizzoni
                                            JONEA140
                                            Melbourne
                                            1 June 2014
                                            Active
                                            Timesheet
                                            more_vert
                                        

                                        

                                            Giacomo Guilizzoni
                                            JONEA140
                                            Melbourne
                                            1 June 2014
                                            Active
                                            Timesheet
                                            more_vert
                                        

                                    
                                

                            

                        
                            
                        
                        

                            

                        

                        
                    
 
                    
                    
                    

                    
                        
                        
Propeller Table with Highlighted Heading

                        
To highlight the table heading, use .thead-dark and .thead-light class.

                        
        
                        
                        
                            
 
                                

                                    
                                        

                                            Name
                                            Code
                                            State/City  
                                            End Date of Work
                                            Status
                                            Timesheet
                                            
                                        

                                    
                                    
                                        

                                            Giacomo Guilizzoni
                                            JONEA140
                                            Melbourne
                                            1 June 2014
                                            Active
                                            Timesheet
                                            more_vert
                                        

                                        

                                            Giacomo Guilizzoni
                                            JONEA140
                                            Melbourne
                                            1 June 2014
                                            Active
                                            Timesheet
                                            more_vert
                                        

                                        

                                            Giacomo Guilizzoni
                                            JONEA140
                                            Melbourne
                                            1 June 2014
                                            Active
                                            Timesheet
                                            more_vert
                                        

                                        

                                            Giacomo Guilizzoni
                                            
                                            Melbourne
                                            1 June 2014
                                            Active
                                            Timesheet
                                            more_vert
                                        

                                        

                                            Giacomo Guilizzoni
                                            JONEA140
                                            Melbourne
                                            1 June 2014
                                            Active
                                            Timesheet
                                            more_vert
                                        

                                        

                                            Giacomo Guilizzoni
                                            JONEA140
                                            Melbourne
                                            1 June 2014
                                            Active
                                            Timesheet
                                            more_vert
                                        

                                    
                                

                            

                        
                            
                        
                        

                            

                        

                        
                    
 
                    
                    
                    

                    
                        
                        
Propeller Table with Caption

                        
Add <caption> above the <thead>to describe what the table is all about.

                        
        
                        
                        
                            
 
                                

                                 	Logsheet of Employees
                                    
                                        

                                            Name
                                            Code
                                            State/City  
                                            End Date of Work
                                            Status
                                            Timesheet
                                            
                                        

                                    
                                    
                                        

                                            Giacomo Guilizzoni
                                            JONEA140
                                            Melbourne
                                            1 June 2014
                                            Active
                                            Timesheet
                                            more_vert
                                        

                                        

                                            Giacomo Guilizzoni
                                            JONEA140
                                            Melbourne
                                            1 June 2014
                                            Active
                                            Timesheet
                                            more_vert
                                        

                                        

                                            Giacomo Guilizzoni
                                            JONEA140
                                            Melbourne
                                            1 June 2014
                                            Active
                                            Timesheet
                                            more_vert
                                        

                                        

                                            Giacomo Guilizzoni
                                            
                                            Melbourne
                                            1 June 2014
                                            Active
                                            Timesheet
                                            more_vert
                                        

                                        

                                            Giacomo Guilizzoni
                                            JONEA140
                                            Melbourne
                                            1 June 2014
                                            Active
                                            Timesheet
                                            more_vert
                                        

                                        

                                            Giacomo Guilizzoni
                                            JONEA140
                                            Melbourne
                                            1 June 2014
                                            Active
                                            Timesheet
                                            more_vert
                                        

                                    
                                

                            

                        
                            
                        
                        

                            

                        

                        
                    
 
                    
                    
                    

                    
                        
                        
Card Table

                        
Card Table reformats each row into a card for narrow screens. This way user can view complete information without horizontal scroll. Add .pmd-table-card to convert simple table into Card Table.
  
                        
                        
                        
                        
						

							
								

									Name
									Code
									State/City
									End Date of Work
									Status
									Timesheet
									
								

							
							
								

									Giacomo Guilizzoni
									JONEA140
									Melbourne
									1 June 2014
									Active
									Timesheet
									more_vert
								

								

									Giacomo Guilizzoni
									JONEA140
									Melbourne
									1 June 2014
									Active
									Timesheet
									more_vert
								

								

									Giacomo Guilizzoni
									JONEA140
									Melbourne
									1 June 2014
									Active
									Timesheet
									more_vert
								

								

									Giacomo Guilizzoni
									JONEA140
									Melbourne
									1 June 2014
									Active
									Timesheet
									more_vert
								

								

									Giacomo Guilizzoni
									JONEA140
									Melbourne
									1 June 2014
									Active
									Timesheet
									more_vert
								

								

									Giacomo Guilizzoni
									JONEA140
									Melbourne
									1 June 2014
									Active
									Timesheet
									more_vert
								

							
						

                        
                        
                        
                        

                            

                        
 
                    	
                        
                    
			 
                    
                    
                    

                    
                        
                        
Nested Table

                        
Nested Table is a table inside a table. It can have several rows for each row of its parent table. Add .child-table to the tr where you want to nest your table. Then add colspan to the td followed by above tr with the value equal to the number of columns in sub-table. Add .table-sm followed by .table in nested table tag to make it look like sub-table.

                        
                        
                        
                        
                            

                                

                                    
                                        

                                            Name
                                            Code
                                            State/City  
                                            End Date of Work
                                            Status
                                            Timesheet
                                            
                                        

                                    
                                    
                                        

                                            Giacomo Guilizzoni
                                            JONEA140
                                            Melbourne
                                            1 June 2014
                                            Active
                                            Timesheet
                                            more_vert
                                        

                                        

                                            Giacomo Guilizzoni
                                            JONEA140
                                            Melbourne
                                            1 June 2014
                                            Active
                                            Timesheet
                                            more_vert
                                        

                                        

                                            Giacomo Guilizzoni
                                            JONEA140
                                            Melbourne
                                            1 June 2014
                                            Active
                                            Timesheet
                                            more_vert
                                        

                                        

                                            

                                                    
                                                        

                                                            #
                                                            First Name
                                                            Last Name
                                                            Username
                                                        

                                                    
                                                    
                                                        

                                                            1
                                                            Mark
                                                            Otto
                                                            @mdo
                                                        

                                                        

                                                            2
                                                            Jacob
                                                            Thornton
                                                            @fat
                                                        

                                                        

                                                            3
                                                            Larry
                                                            the Bird
                                                            @twitter
                                                        

                                                    
                                                

                                        

                                        

                                            Giacomo Guilizzoni
                                            
                                            Melbourne
                                            1 June 2014
                                            Active
                                            Timesheet
                                            more_vert
                                        

                                        

                                            Giacomo Guilizzoni
                                            JONEA140
                                            Melbourne
                                            1 June 2014
                                            Active
                                            Timesheet
                                            more_vert
                                        

                                        

                                            Giacomo Guilizzoni
                                            JONEA140
                                            Melbourne
                                            1 June 2014
                                            Active
                                            Timesheet
                                            more_vert
                                        

                                    
                                

                            

                        
                        
                         
                        

                            

                        

                        
                    
 
                    
                    
                    

                    
                        
                        
Striped Rows Table

                        
Create Striped Rows Table by adding .table-striped in your code. To create an inverse stripped table, use .table-dark class along with .table-stripped class.

                        
                        
                        
                        
                            

                                

                                    
                                        

                                            Name
                                            Code
                                            State/City
                                            End Date of Work
                                            Status
                                            Timesheet
                                            
                                        

                                    
                                    
                                        

                                            Giacomo Guilizzoni
                                            JONEA140
                                            Melbourne
                                            1 June 2014
                                            Active
                                            Timesheet
                                            more_vert
                                        

                                        

                                            Giacomo Guilizzoni
                                            JONEA140
                                            Melbourne
                                            1 June 2014
                                            Active
                                            Timesheet
                                            more_vert
                                        

                                        

                                            Giacomo Guilizzoni
                                            JONEA140
                                            Melbourne
                                            1 June 2014
                                            Active
                                            Timesheet
                                            more_vert
                                        

                                        

                                            Giacomo Guilizzoni
                                            JONEA140
                                            Melbourne
                                            1 June 2014
                                            Active
                                            Timesheet
                                            more_vert
                                        

                                        

                                            Giacomo Guilizzoni
                                            JONEA140
                                            Melbourne
                                            1 June 2014
                                            Active
                                            Timesheet
                                            more_vert
                                        

                                        

                                            Giacomo Guilizzoni
                                            JONEA140
                                            Melbourne
                                            1 June 2014
                                            Active
                                            Timesheet
                                            more_vert
                                        

                                    
                                

                            

                        
                        
                        
                        

                            

                        
 
                        
                    
  			
                    
                    
                    

                    
                        
                        
Bordered Table

                        
Create Bordered Table by adding .table-bordered in your code. To create an inverse bordered table, use .table-dark class along with .table-bordered class.

                        
                        
                        
                        
                        

                            

                                
                                    

                                        Name
                                        Code
                                        State/City
                                        End Date of Work
                                        Status
                                        Timesheet
                                        
                                    

                                
                                
                                
                                    

                                        Giacomo Guilizzoni
                                        JONEA140
                                        Melbourne
                                        1 June 2014
                                        Active
                                        Timesheet
                                        more_vert
                                    

                                    

                                        Giacomo Guilizzoni
                                        JONEA140
                                        Melbourne
                                        1 June 2014
                                        Active
                                        Timesheet
                                        more_vert
                                    

                                    

                                        Giacomo Guilizzoni
                                        JONEA140
                                        Melbourne
                                        1 June 2014
                                        Active
                                        Timesheet
                                        more_vert
                                    

                                    

                                        Giacomo Guilizzoni
                                        JONEA140
                                        Melbourne
                                        1 June 2014
                                        Active
                                        Timesheet
                                        more_vert
                                    

                                    

                                        Giacomo Guilizzoni
                                        JONEA140
                                        Melbourne
                                        1 June 2014
                                        Active
                                        Timesheet
                                        more_vert
                                    

                                    

                                        Giacomo Guilizzoni
                                        JONEA140
                                        Melbourne
                                        1 June 2014
                                        Active
                                        Timesheet
                                        more_vert
                                    

                                
                            

                        

                        
                
                        
                        

                            

                        
 
                        
                    
 
                    
                    
                    

                    
                        
                        
Borderless Table

                        
Create Borderless Table by adding .table-borderless in your code.

                        
                        
                        
                        
                            

                                

                                    
                                        

                                            Name
                                            Code
                                            State/City
                                            End Date of Work
                                            Status
                                            Timesheet
                                            
                                        

                                    
                                    
                                    
                                        

                                            Giacomo Guilizzoni
                                            JONEA140
                                            Melbourne
                                            1 June 2014
                                            Active
                                            Timesheet
                                            more_vert
                                        

                                        

                                            Giacomo Guilizzoni
                                            JONEA140
                                            Melbourne
                                            1 June 2014
                                            Active
                                            Timesheet
                                            more_vert
                                        

                                        

                                            Giacomo Guilizzoni
                                            JONEA140
                                            Melbourne
                                            1 June 2014
                                            Active
                                            Timesheet
                                            more_vert
                                        

                                        

                                            Giacomo Guilizzoni
                                            JONEA140
                                            Melbourne
                                            1 June 2014
                                            Active
                                            Timesheet
                                            more_vert
                                        

                                        

                                            Giacomo Guilizzoni
                                            JONEA140
                                            Melbourne
                                            1 June 2014
                                            Active
                                            Timesheet
                                            more_vert
                                        

                                        

                                            Giacomo Guilizzoni
                                            JONEA140
                                            Melbourne
                                            1 June 2014
                                            Active
                                            Timesheet
                                            more_vert
                                        

                                    
                                

                            

                        
                
                        
                        

                            

                        
 
                        
                    
 
                    
                    
                    

                    
                        
                        
Hoverable Rows Table

                        
Create Hoverable Rows Table by adding .table-hover in your code. To create an inverse hoverable rows table, use .table-dark class along with .table-hover class.

                        
                        
                        
                            

                                

                                    
                                        

                                            Name
                                            Code
                                            State/City
                                            End Date of Work
                                            Status
                                            Timesheet
                                            
                                        

                                    
                                    
                                        

                                            Giacomo Guilizzoni
                                            JONEA140
                                            Melbourne
                                            1 June 2014
                                            Active
                                            Timesheet
                                            more_vert
                                        

                                        

                                            Giacomo Guilizzoni
                                            JONEA140
                                            Melbourne
                                            1 June 2014
                                            Active
                                            Timesheet
                                            more_vert
                                        

                                        

                                            Giacomo Guilizzoni
                                            JONEA140
                                            Melbourne
                                            1 June 2014
                                            Active
                                            Timesheet
                                            more_vert
                                        

                                        

                                            Giacomo Guilizzoni
                                            JONEA140
                                            Melbourne
                                            1 June 2014
                                            Active
                                            Timesheet
                                            more_vert
                                        

                                        

                                            Giacomo Guilizzoni
                                            JONEA140
                                            Melbourne
                                            1 June 2014
                                            Active
                                            Timesheet
                                            more_vert
                                        

                                        

                                            Giacomo Guilizzoni
                                            JONEA140
                                            Melbourne
                                            1 June 2014
                                            Active
                                            Timesheet
                                            more_vert
                                        

                                    
                                

                            

                        
                        
                        
                        

                            

                        
 
                    
 			 
                    
                    
                    

                    	
                        
Small Table

                        
Create Small Table by adding .table-sm in your code.

                        
                        
                        
                        
                            

                                

                                    
                                        

                                            Name
                                            Code
                                            State/City
                                            End Date of Work
                                            Status
                                            Timesheet
                                            
                                        

                                    
                                    
                                        

                                            Giacomo Guilizzoni
                                            JONEA140
                                            Melbourne
                                            1 June 2014
                                            Active
                                            Timesheet
                                            more_vert
                                        

                                        

                                            Giacomo Guilizzoni
                                            JONEA140
                                            Melbourne
                                            1 June 2014
                                            Active
                                            Timesheet
                                            more_vert
                                        

                                        

                                            Giacomo Guilizzoni
                                            JONEA140
                                            Melbourne
                                            1 June 2014
                                            Active
                                            Timesheet
                                            more_vert
                                        

                                        

                                            Giacomo Guilizzoni
                                            JONEA140
                                            Melbourne
                                            1 June 2014
                                            Active
                                            Timesheet
                                            more_vert
                                        

                                        

                                            Giacomo Guilizzoni
                                            JONEA140
                                            Melbourne
                                            1 June 2014
                                            Active
                                            Timesheet
                                            more_vert
                                        

                                        

                                            Giacomo Guilizzoni
                                            JONEA140
                                            Melbourne
                                            1 June 2014
                                            Active
                                            Timesheet
                                            more_vert
                                        

                                    
                                

                            

                        
                        
                        
                        

                            

                        
 
                       
                    
  			
                    
                    
                    

                    
                        
                        
Contextual Table

                        
To create Contextual Table add the class on row namely .table-active for active, .table-success for success, .table-info for info, .table-warning for warning, and .table-danger for danger. To create an inverse contextual table, use class .table-dark along with .pmd-table class.

                        
                        
                        
                        
                            

                                

                                    
                                        

                                            #
                                            Column heading
                                            Column heading
                                            Column heading
                                        

                                    
                                    
                                        

                                            1
                                            Column content
                                            Column content
                                            Column content
                                        

                                        

                                            2
                                            Column content
                                            Column content
                                            Column content
                                        

                                        

                                            4
                                            Column content
                                            Column content
                                            Column content
                                        

                                        

                                            6
                                            Column content
                                            Column content
                                            Column content
                                        

                                        

                                            8
                                            Column content
                                            Column content
                                            Column content
                                        

                                        

                                            3
                                            Column content
                                            Column content
                                            Column content
                                        

                                        

                                            5
                                            Column content
                                            Column content
                                            Column content
                                        

                                        
                                        

                                            7
                                            Column content
                                            Column content
                                            Column content
                                        

                                        

                                            9
                                            Column content
                                            Column content
                                            Column content
                                        

                                    
                                

                            

                        
                        
                        
                        

                            

                        
		
                        
                    
  			
                    
                    
                    

                        
                        
                        
Dark Table

                        
Create Inverse Table by adding .table-dark in your code.

                        
                        
                        
                         
                        
                            

                                

                                    
                                        

                                            Name
                                            Code
                                            State/City
                                            End Date of Work
                                            Status
                                            Timesheet
                                            
                                        

                                    
                                    
                                        

                                            Giacomo Guilizzoni
                                            JONEA140
                                            Melbourne
                                            1 June 2014
                                            Active
                                            Timesheet
                                            more_vert
                                        

                                        

                                            Giacomo Guilizzoni
                                            JONEA140
                                            Melbourne
                                            1 June 2014
                                            Active
                                            Timesheet
                                            more_vert
                                        

                                        

                                            Giacomo Guilizzoni
                                            JONEA140
                                            Melbourne
                                            1 June 2014
                                            Active
                                            Timesheet
                                            more_vert
                                        

                                        

                                            Giacomo Guilizzoni
                                            JONEA140
                                            Melbourne
                                            1 June 2014
                                            Active
                                            Timesheet
                                            more_vert
                                        

                                        

                                            Giacomo Guilizzoni
                                            JONEA140
                                            Melbourne
                                            1 June 2014
                                            Active
                                            Timesheet
                                            more_vert
                                        

                                        

                                            Giacomo Guilizzoni
                                            JONEA140
                                            Melbourne
                                            1 June 2014
                                            Active
                                            Timesheet
                                            more_vert
                                        

                                    
                                

                            

                        
                        
                        
                        

                            

                        
 
                                
                        
                    
 
                     
                    
                    

                    
                        
                        
Reflow Table

                        
Create Reflow Table by adding .table-reflow in your code.

                        
                        
                        
                        
                        

                            

                                
                                    

                                        Name
                                        Code
                                        State/City
                                        Incharge Name
                                        Mobile
                                        Type of Work
                                        End Date of Work
                                        Status
                                        Timesheet
                                         
                                    

                                
                                
                                    

                                        Giacomo Guilizzoni
                                        JONEA140
                                        Melbourne
                                        Giacomo Guilizzoni
                                        9625145236
                                        9625145236
                                        1 June 2014
                                        Active
                                        Timesheet
                                        more_vert
                                    

                                    

                                        Giacomo Guilizzoni
                                        JONEA140
                                        Melbourne
                                        Giacomo Guilizzoni
                                        9625145236
                                        9625145236
                                        1 June 2014
                                        Active
                                        Timesheet
                                        more_vert
                                    

                                    

                                        Giacomo Guilizzoni
                                        JONEA140
                                        Melbourne
                                        Giacomo Guilizzoni
                                        9625145236
                                        9625145236
                                        1 June 2014
                                        Active
                                        Timesheet
                                        more_vert
                                    

                                    

                                        Giacomo Guilizzoni
                                        JONEA140
                                        Melbourne
                                        Giacomo Guilizzoni
                                        9625145236
                                        9625145236
                                        1 June 2014
                                        Active
                                        Timesheet
                                        more_vert
                                    

                                    

                                        Giacomo Guilizzoni
                                        JONEA140
                                        Melbourne
                                        Giacomo Guilizzoni
                                        9625145236
                                        9625145236
                                        1 June 2014
                                        Active
                                        Timesheet
                                        more_vert
                                    

                                    

                                        Giacomo Guilizzoni
                                        JONEA140
                                        Melbourne
                                        Giacomo Guilizzoni
                                        9625145236
                                        9625145236
                                        1 June 2014
                                        Active
                                        Timesheet
                                        more_vert
                                    

                                    

                                        Giacomo Guilizzoni
                                        JONEA140
                                        Melbourne
                                        Giacomo Guilizzoni
                                        9625145236
                                        9625145236
                                        1 June 2014
                                        Active
                                        Timesheet
                                        more_vert
                                    

                                    

                                        Giacomo Guilizzoni
                                        JONEA140
                                        Melbourne
                                        Giacomo Guilizzoni
                                        9625145236
                                        9625145236
                                        1 June 2014
                                        Active
                                        Timesheet
                                        more_vert
                                    

                                    

                                        Giacomo Guilizzoni
                                        JONEA140
                                        Melbourne
                                        Giacomo Guilizzoni
                                        9625145236
                                        9625145236
                                        1 June 2014
                                        Active
                                        Timesheet
                                        more_vert
                                    

                                
                            

                        
 
                        
                        
                        

                            

                        
 
                        				
                    
 
                    
                    
                    

                    
                        
                        
Table with Expand/Collapse

                        
You can create table with expand and collapse feature by adding class .child-table-expand to the expand icon and wrapping the child table with a <div> having class .direct-child-table.

                        
                        
                        
                        
                        
                            

                                

                                    
                                        

                                            Ticket No.
                                            Browser Name
                                            Month
                                            Total
                                            Status
                                            Last Updated On
                                            Actions
                                        

                                    
                                    
                                        

                                            PMD484150
                                            Firefox
                                            September
                                            25%
                                            Average
                                            2016-09-20 15:50:00
                                            
                                                
                                                    edit
                                                
                                                
                                                    delete
                                                					
                                            
                                        

                                        

                                            PMD484149
                                            Google Chrome
                                            September
                                            32%
                                            High
                                            2016-09-21 15:50:00
                                            
                                                
                                                    edit
                                                
                                                
                                                    delete
                                                					
                                            
                                        

                                        

                                            PMD484148
                                            Safari
                                            September
                                            13%
                                            Low
                                            2016-09-20 14:00:00
                                            
                                                
                                                    edit
                                                
                                                
                                                    delete
                                                					
                                            
                                        

                                        

                                            PMD484147
                                            Opera
                                            September
                                            7%
                                            Low
                                            2016-09-20 11:30:00
                                            
                                                
                                                    edit
                                                
                                                
                                                    delete
                                                
                                                add_circle_outline
                                            
                                        

                                        

                                            
                                                
                                        
                                    

                            			

                                            PMD484146
                                            Mobile & Tablet
                                            September
                                            4%
                                            Very Low
                                            2016-07-21 17:40:00
                                            
                                                edit
                                                delete
                                                					
                                            
                                        

                                    
                                

                            

                        
                        
                        
                        

                            

                        
 
                        
                    
 
                    
                    
                    

                    
                        
                        
Table with Fixed Header

                        
To create a table with fixed header, wrap the table with a <div> with class .scrollable-table. And then wrap that <div> with another div having class .table-fixed-head. To trigger the header as fixed, add .header to the <thead>.

                        
                        
                        
                        
                        

                            

                                

                                    

                                        
                                            

                                                Name
                                                Code
                                                State/City
                                                End Date of Work
                                                Status
                                                Timesheet
                                                
                                            

                                        
                                        
                                            

                                                Giacomo Guilizzoni
                                                JONEA140
                                                Melbourne
                                                1 June 2014
                                                Active
                                                Timesheet
                                                more_vert
                                            

                                            

                                                Giacomo Guilizzoni
                                                JONEA140
                                                Melbourne
                                                1 June 2014
                                                Active
                                                Timesheet
                                                more_vert
                                            

                                            

                                                Giacomo Guilizzoni
                                                JONEA140
                                                Melbourne
                                                1 June 2014
                                                Active
                                                Timesheet
                                                more_vert
                                            

                                            

                                                Giacomo Guilizzoni
                                                
                                                Melbourne
                                                1 June 2014
                                                Active
                                                Timesheet
                                                more_vert
                                            

                                            

                                                Giacomo Guilizzoni
                                                JONEA140
                                                Melbourne
                                                1 June 2014
                                                Active
                                                Timesheet
                                                more_vert
                                            

                                            

                                                Giacomo Guilizzoni
                                                JONEA140
                                                Melbourne
                                                1 June 2014
                                                Active
                                                Timesheet
                                                more_vert
                                            

                                        
                                    

                                

                            

                        
 
                        
                        
                        

                            

                        
 
                        
                    
 
                    
                    
                    

                        
                        
Responsive Table

                        
Create Responsive Table by using the .table-responsive class.

                        
                        
                        
                        
                            
 
                                

                                    
                                        

                                            Name
                                            Code
                                            State/City  
                                            End Date of Work
                                            Status
                                            Timesheet
                                            
                                        

                                    
                                    
                                        

                                            Giacomo Guilizzoni
                                            JONEA140
                                            Melbourne
                                            1 June 2014
                                            Active
                                            Timesheet
                                            more_vert
                                        

                                        

                                            Giacomo Guilizzoni
                                            JONEA140
                                            Melbourne
                                            1 June 2014
                                            Active
                                            Timesheet
                                            more_vert
                                        

                                        

                                            Giacomo Guilizzoni
                                            JONEA140
                                            Melbourne
                                            1 June 2014
                                            Active
                                            Timesheet
                                            more_vert
                                        

                                        

                                            Giacomo Guilizzoni
                                            
                                            Melbourne
                                            1 June 2014
                                            Active
                                            Timesheet
                                            more_vert
                                        

                                        

                                            Giacomo Guilizzoni
                                            JONEA140
                                            Melbourne
                                            1 June 2014
                                            Active
                                            Timesheet
                                            more_vert
                                        

                                        

                                            Giacomo Guilizzoni
                                            JONEA140
                                            Melbourne
                                            1 June 2014
                                            Active
                                            Timesheet
                                            more_vert
                                        

                                    
                                

                            

                        
                            
                        
                        

                            

                        

                    
 
                    
                    
                    

                        
                        
Breakpoint Specific Responsive Table

                        
To create Breakpoint Specific Responsive Table, use the .table-responsive-{sm|md|ld|xl} class. For example, to create a table will remain responsive only till tablet view, use .table-responsive-md class.

                        
                        
                        
                        
                        
                            
 
                                

                                    
                                        

                                            Name
                                            Code
                                            State/City  
                                            End Date of Work
                                            Status
                                            Timesheet
                                            
                                        

                                    
                                    
                                        

                                            Giacomo Guilizzoni
                                            JONEA140
                                            Melbourne
                                            1 June 2014
                                            Active
                                            Timesheet
                                            more_vert
                                        

                                        

                                            Giacomo Guilizzoni
                                            JONEA140
                                            Melbourne
                                            1 June 2014
                                            Active
                                            Timesheet
                                            more_vert
                                        

                                        

                                            Giacomo Guilizzoni
                                            JONEA140
                                            Melbourne
                                            1 June 2014
                                            Active
                                            Timesheet
                                            more_vert
                                        

                                        

                                            Giacomo Guilizzoni
                                            
                                            Melbourne
                                            1 June 2014
                                            Active
                                            Timesheet
                                            more_vert
                                        

                                        

                                            Giacomo Guilizzoni
                                            JONEA140
                                            Melbourne
                                            1 June 2014
                                            Active
                                            Timesheet
                                            more_vert
                                        

                                        

                                            Giacomo Guilizzoni
                                            JONEA140
                                            Melbourne
                                            1 June 2014
                                            Active
                                            Timesheet
                                            more_vert
                                        

                                    
                                

                            

                        
                            
                        
                        

                            

                        

                    
 
                    
                    			
                    

                        
Configuration Options

                        
The Propeller CSS classes apply various predefined visual enhancements to the Table. The table lists the available classes and their effects.

                        

                            
                                

                                    Propeller Classes
                                    Effect
                                    Remark
                                

                            
                            
                                

                                    .pmd-table
                                    Class for Propeller Table
                                    Required
                                

                                

                                    .pmd-card-table
                                    Wrapper class for card layout.	
                                    Optional
                                

                                

                                    .child-table
                                    Add this class to create a nested table
                                    Optional
                                

                                

                                    .child-table-expand
                                    Add this class to the icon onclicking which the nested/child table will expand.
                                    Optional
                                

                                

                                    .direct-child-table
                                    Add this class to the child table to expand it on clicking the icon
                                    Optional
                                

                                

                                    .table-fixed-head
                                    Add this class to make the table with fixed header
                                    Optional
                                

                                

                                    .scrollable-table
                                    Add this class to make the table scrollable when the header is fixed.
                                    Optional
                                

                                

                                    .header
                                    Add this class to trigger the header as fixed on scroll.
                                    Optional
                                

                            
                        

                    
 
                    
				

                
                

                    
 
                        Botstrap Table
                        Propeller Table
                        Propeller Table with Highlighted Heading
                        Propeller Table with Caption
                        Card Table 
                        Nested Table 
                        Striped Rows Table 
                        Bordered Table
                        Borderless Table
                        Hoverable Rows Table  
                        Small Table 
                        Contextual Table 
                        Dark Table 
                        Reflow Table
                        Table with Expand/Collapse
                        Table with Fixed Header
                        Responsive Table
                        Breakpoint Specific Responsive Table
                        Configuration Options