Bootstrap 5 Responsive Tables
Last Updated :
29 Mar, 2023
Bootstrap 5 Responsive table is used to make a table responsive in two different categories we can make the table always responsive, or make the table responsive on the basis of the breakpoint.
Bootstrap 5 Responsive Tables:
- Table Always Responsive: This is used for horizontal scrolling of the table across all the viewports or specific viewports. To scroll the table horizontally for all the viewports, we can add a class table-responsive.
- Table Breakpoint Specific: This s specifically used to scroll the table horizontally on a particular viewport, we can add a class table-responsive-*. This * can be substituted with a particular breakpoint of viewport like sm, md, lg, xl, etc.
Syntax:
<div class="Table responsive Class">
<table class="table">
...
</table>
</div>
Example 1: In this example, we will make the table always responsive.
HTML
<!DOCTYPE html>
< html >
< head >
< link href =
rel = "stylesheet"
integrity =
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin = "anonymous" >
</ head >
< body >
< div class = "m-2" >
< h1 class = "text-success" >
GeeksforGeeks
</ h1 >
< strong >Bootstrap 5 Responsive Tables</ strong >
< p class = "text-center" >This table will be always responsive</ p >
< div class = "table-responsive" >
< table class = "table" >
< thead >
< tr >
< th >Year</ th >
< th >Stream</ th >
< th >Section</ th >
< th >Roll_No</ th >
< th >College</ th >
</ tr >
</ thead >
< tbody >
< tr >
< td >First Year</ td >
< td >Computer Science Engineering</ td >
< td >CSE A</ td >
< td >1445698658</ td >
< td >Geeksforgeeks Education Institute</ td >
</ tr >
</ tbody >
</ table >
</ div >
< br >< br >
< p class = "text-center" >This table is not responsive</ p >
< div >
< table class = "table" >
< thead >
< tr >
< th >Year</ th >
< th >Stream</ th >
< th >Section</ th >
< th >Roll_No</ th >
< th >College</ th >
</ tr >
</ thead >
< tbody >
< tr >
< td >First Year</ td >
< td >Computer Science Engineering</ td >
< td >CSE A</ td >
< td >1445698658</ td >
< td >Geeksforgeeks Education Institute</ td >
</ tr >
</ tbody >
</ table >
</ div >
</ div >
</ body >
</ html >
|
Output:
Example 2: In this example, we will make the table responsive on the basis of breakpoints.
HTML
<!DOCTYPE html>
< html >
< head >
< link href =
rel = "stylesheet"
integrity =
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin = "anonymous" >
</ head >
< body >
< div class = "m-2" >
< h1 class = "text-success" >
GeeksforGeeks
</ h1 >
< strong >Bootstrap 5 Responsive Tables</ strong >
< p class = "text-center" >
This table will be responsive when the breakpoint is set ot small
</ p >
< div class = "table-responsive-sm" >
< table class = "table" >
< thead >
< tr >
< th >Year</ th >
< th >Stream</ th >
< th >Section</ th >
< th >Roll_No</ th >
< th >College</ th >
< th >Favourite Sub</ th >
< th >Classes</ th >
< th >Admission Via</ th >
< th >Registration_Id</ th >
< th >State</ th >
</ tr >
</ thead >
< tbody >
< tr >
< td >Fourth Year</ td >
< td >Computer Science Engineering</ td >
< td >CSE A</ td >
< td >1445698658</ td >
< td >Geeksforgeeks Education Institute</ td >
< td >Automata</ td >
< td >Morning Class</ td >
< td >Entrance Exam</ td >
< td >CSE-1445698658</ td >
< td >Utter pradesh</ td >
</ tr >
</ tbody >
</ table >
</ div >
< br >< br >
< p class = "text-center" >This table is always responsive</ p >
< div class = "table-responsive" >
< table class = "table" >
< thead >
< tr >
< th >Year</ th >
< th >Stream</ th >
< th >Section</ th >
< th >Roll_No</ th >
< th >College</ th >
< th >Favourite Sub</ th >
< th >Classes</ th >
< th >Admission Via</ th >
< th >Registration_Id</ th >
< th >State</ th >
</ tr >
</ thead >
< tbody >
< tr >
< td >Fourt Year</ td >
< td >Computer Science Engineering</ td >
< td >CSE A</ td >
< td >1445698658</ td >
< td >Geeksforgeeks Education Institute</ td >
< td >Automata</ td >
< td >Morning Class</ td >
< td >Entrance Exam</ td >
< td >CSE-1445698658</ td >
< td >Utter pradesh</ td >
</ tr >
</ tbody >
</ table >
</ div >
</ div >
</ body >
</ html >
|
Output:
Reference: https://getbootstrap.com/docs/5.0/content/tables/#responsive-tables
Share your thoughts in the comments
Please Login to comment...