What is a Condensed Table in Bootstrap ?
The .table-condensed is a class in Bootstrap 3 Framework. It can be used when we want to have row padding half so that we can condense the table. So that I can be more user-friendly. Thus .table-condensed class is used when you want to display denser tables on web pages. If we donât use .table-condensed class in the bootstrap table then when you have a dense table and you try to view it on small screen devices then we need to scroll horizontally to view hidden columns whereas when .table-condensed class is used the whole table is condensed as per your screen size so that you can get a complete view of the table at once.
Syntax:
For Bootstrap 3
<table class="table table-condensed">
For Bootstrap 4
<table class="table table-sm">
Example 1: In this example, we will create a condensed table in Bootstrap 3 using a table-condensed class.
HTML
<!DOCTYPE html> < html > < head > < title >Bootstrap Condensed Table</ title > < meta name = "viewport" content = "width = device-width, initial-scale = 1" > <!-- Include Bootstrap 3 and jQuery CDNs --> < link href = "https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel = "stylesheet" > < script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js" > </ script > < script src = "https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" > </ script > </ head > < body > <!-- Include .table-condensed class after .table class in table tag--> < table class = "table table-condensed" > < thead > < tr > < th >ID</ th > < th >First Name</ th > < th >Last Name</ th > < th >Email</ th > </ tr > </ thead > < tbody > < tr > < td >1</ td > < td >Iron</ td > < td >Man</ td > < td >ironman@mail.com</ td > </ tr > < tr > < td >2</ td > < td >Captain</ td > < td >America</ td > < td >captainamerica@mail.com</ td > </ tr > < tr > < td >3</ td > < td >Doctor</ td > < td >Strange</ td > < td >doctorstrange@mail.com</ td > </ tr > < tr > < td >4</ td > < td >Black</ td > < td >Widow</ td > < td >blackwidow@mail.com</ td > </ tr > </ tbody > </ table > </ body > </ html > |
Output:
Example 2: In this example, we will create a condensed table in Bootstrap 4 using a table-sm class.
HTML
<!DOCTYPE html> < html > < head > < title >Bootstrap Condensed Table</ title > < meta name = "viewport" content = "width = device-width, initial-scale = 1" > <!-- Include Bootstrap 4 and jQuery CDNs --> < link href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel = "stylesheet" > < script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js" > </ script > < script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" > </ script > </ head > < body > <!-- Include .table-sm class after .table class in table tag--> < table class = "table table-sm" > < thead > < tr > < th >ID</ th > < th >First Name</ th > < th >Last Name</ th > < th >Email</ th > </ tr > </ thead > < tbody > < tr > < td >1</ td > < td >Iron</ td > < td >Man</ td > < td >ironman@mail.com</ td > </ tr > < tr > < td >2</ td > < td >Captain</ td > < td >America</ td > < td >captainamerica@mail.com</ td > </ tr > < tr > < td >3</ td > < td >Doctor</ td > < td >Strange</ td > < td >doctorstrange@mail.com</ td > </ tr > < tr > < td >4</ td > < td >Black</ td > < td >Widow</ td > < td >blackwidow@mail.com</ td > </ tr > </ tbody > </ table > </ body > </ html > |
Output:
Contact Us