ADMINISTRATOR
Basic Tables
BASIC EXAMPLE

For basic styling—light padding and only horizontal dividers—add the base class table to any table

Name Phone Number Date of Birth Active?
Semp D. Pearson 123-456-7890 July 24, 1980
Semp D. Pearson 123-456-7890 July 24, 1980
Semp D. Pearson 123-456-7890 July 24, 1980
Semp D. Pearson 123-456-7890 July 24, 1980 
				

					

						
							

								Name
								Phone Number
								Date of Birth
								Active?
							

						
						
							

								Semp D. Pearson
								123-456-7890
								July 24, 1980
								 
									

									

										
							

							

								Semp D. Pearson
								123-456-7890
								July 24, 1980
								 
									

									

										
							

							

								Semp D. Pearson
								123-456-7890
								July 24, 1980
								 
									

									

										
							

							

								Semp D. Pearson
								123-456-7890
								July 24, 1980
INVERSE TABLE

You can also invert the colors—with light text on dark backgrounds—with .table-dark.

Name Phone Number Date of Birth Active?
Semp D. Pearson 123-456-7890 July 24, 1980
Semp D. Pearson 123-456-7890 July 24, 1980
Semp D. Pearson 123-456-7890 July 24, 1980
Semp D. Pearson 123-456-7890 July 24, 1980 
				

					

						
							

								Name
								Phone Number
								Date of Birth
								Active?
							

						
						
							

								Semp D. Pearson
								123-456-7890
								July 24, 1980
								 
									

									

										
							

							

								Semp D. Pearson
								123-456-7890
								July 24, 1980
								 
									

									

										
							

							

								Semp D. Pearson
								123-456-7890
								July 24, 1980
								 
									

									

										
							

							

								Semp D. Pearson
								123-456-7890
								July 24, 1980
STRIPED ROWS

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

Name Phone Number Date of Birth Active?
Semp D. Pearson 123-456-7890 July 24, 1980
Semp D. Pearson 123-456-7890 July 24, 1980
Semp D. Pearson 123-456-7890 July 24, 1980
Semp D. Pearson 123-456-7890 July 24, 1980 
			  

				

					
						

							Name
							Phone Number
							Date of Birth
							Active?
						

					
					
						

							Semp D. Pearson
							123-456-7890
							July 24, 1980
							 
								

								

									
						

						

							Semp D. Pearson
							123-456-7890
							July 24, 1980
							 
								

								

									
						

						

							Semp D. Pearson
							123-456-7890
							July 24, 1980
							 
								

								

									
						

						

							Semp D. Pearson
							123-456-7890
							July 24, 1980
HOVERABLE ROWS

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

Name Phone Number Date of Birth Active?
Semp D. Pearson 123-456-7890 July 24, 1980
Semp D. Pearson 123-456-7890 July 24, 1980
Semp D. Pearson 123-456-7890 July 24, 1980
Semp D. Pearson 123-456-7890 July 24, 1980 
			   

				

					
						

							Name
							Phone Number
							Date of Birth
							Active?
						

					
					
						

							Semp D. Pearson
							123-456-7890
							July 24, 1980
							 
								

								

									
						

						

							Semp D. Pearson
							123-456-7890
							July 24, 1980
							 
								

								

									
						

						

							Semp D. Pearson
							123-456-7890
							July 24, 1980
							 
								

								

									
						

						

							Semp D. Pearson
							123-456-7890
							July 24, 1980
BORDERED TABLE

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

Name Phone Number Date of Birth Active?
Semp D. Pearson 123-456-7890 July 24, 1980
Semp D. Pearson 123-456-7890 July 24, 1980
Semp D. Pearson 123-456-7890 July 24, 1980
Semp D. Pearson 123-456-7890 July 24, 1980 
			   

				

					
						

							Name
							Phone Number
							Date of Birth
							Active?
						

					
					
						

							Semp D. Pearson
							123-456-7890
							July 24, 1980
							 
								

								

									
						

						

							Semp D. Pearson
							123-456-7890
							July 24, 1980
							 
								

								

									
						

						

							Semp D. Pearson
							123-456-7890
							July 24, 1980
							 
								

								

									
						

						

							Semp D. Pearson
							123-456-7890
							July 24, 1980
BORDERED COLOR TABLE

Add .table-bordered & .border-primary can be added to change colors

Name Phone Number Date of Birth Active?
Semp D. Pearson 123-456-7890 July 24, 1980
Semp D. Pearson 123-456-7890 July 24, 1980
Semp D. Pearson 123-456-7890 July 24, 1980
Semp D. Pearson 123-456-7890 July 24, 1980 
				

					
						

							Name
							Phone Number
							Date of Birth
							Active?
						

					
					
						

							Semp D. Pearson
							123-456-7890
							July 24, 1980
							 
								

								

									
						

						

							Semp D. Pearson
							123-456-7890
							July 24, 1980
							 
								

								

									
						

						

							Semp D. Pearson
							123-456-7890
							July 24, 1980
							 
								

								

									
						

						

							Semp D. Pearson
							123-456-7890
							July 24, 1980
ALWAYS RESPONSIVE

Across every breakpoint, use .table-responsive for horizontally scrolling tables. Use .table-responsive{-sm|-md|-lg|-xl} as needed to create responsive tables up to a particular breakpoint. From that breakpoint and up, the table will behave normally and not scroll horizontally.

# Name Email Phone Address Heading Heading Heading Heading Heading
1 abc Semp Port info@gmail.com 1234567890 1292 Main Resort, India Cell Cell Cell Cell Cell
2 abc Semp Port info@gmail.com 1234567890 1292 Main Resort, India Cell Cell Cell Cell Cell
3 abc Semp Port info@gmail.com 1234567890 1292 Main Resort, India Cell Cell Cell Cell Cell 
				

					

						
							

								#
								Name
								Email
								Phone
								Address
								Heading
								Heading
								Heading
								Heading
								Heading
							

						
						
							

								1
								abc Semp Port
								info@gmail.com
								1234567890
								1292 Main Resort, India	
								Cell
								Cell
								Cell
								Cell
								Cell
							

							

								2
								abc Semp Port
								info@gmail.com
								1234567890
								1292 Main Resort, India
								Cell
								Cell
								Cell
								Cell
								Cell
							

							

								3
								abc Semp Port
								info@gmail.com
								1234567890
								1292 Main Resort, India
								Cell
								Cell
								Cell
								Cell
								Cell
ACTIVE TABLES

Highlight a table row or cell by adding a .table-active class.

Name Phone Number Date of Birth Active?
Semp D. Pearson 123-456-7890 July 24, 1980
Semp D. Pearson 123-456-7890 July 24, 1980
Semp D. Pearson 123-456-7890 July 24, 1980
Semp D. Pearson 123-456-7890 July 24, 1980 
				

					

						
							

								Name
								Phone Number
								Date of Birth
								Active?
							

						
						
							

								Semp D. Pearson
								123-456-7890
								July 24, 1980
								 
									

									

										
							

							

								Semp D. Pearson
								123-456-7890
								July 24, 1980
								 
									

									

										
							

							

								Semp D. Pearson
								123-456-7890
								July 24, 1980
								 
									

									

										
							

							

								Semp D. Pearson
								123-456-7890
								July 24, 1980
NESTING

Border styles, active styles, and table variants are not inherited by nested tables.

Name Phone Number Date of Birth Active?
Risa D. Pearson 336-508-2157 July 24, 1950
Name Phone Number Date of Birth Active?
Semp G. Smith 123-456-7890 September 2, 1939
Semp G. Smith 123-456-7890 September 2, 1939
Semp G. Smith 123-456-7890 September 2, 1939 
				

					

						

							
								

									Name
									Phone Number
									Date of Birth
									Active?
								

							
							
								

									Risa D. Pearson
									336-508-2157
									July 24, 1950
									 
										

										

											
								

								

									
										

											
												

													Name
													Phone Number
													Date of Birth
													Active?
												

											
											
												

													Semp G. Smith
													123-456-7890
													September 2, 1939
													 
														

														

															
												

												

													Semp G. Smith
													123-456-7890
													September 2, 1939
													 
														

														

																
												

											
										

											
								

								

									Semp G. Smith
									123-456-7890
									September 2, 1939

© 2013 Your Website Name. All Rights Reserved | Design by TemplateOnWeb