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" >
< link href =
rel = "stylesheet" >
< script src =
</ script >
< script src =
</ script >
</ head >
< body >
< 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" >
< link href =
rel = "stylesheet" >
< script src =
</ script >
< script src =
</ script >
</ head >
< body >
< 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:
Last Updated :
10 Oct, 2021
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...