Bootstrap 5 Table Always responsive
Bootstrap 5 Table Always responsive 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.
Bootstrap 5 Table Always responsive Class:
- table-responsive: This class is used to scroll the table horizontally.
Syntax:
<div class="table-responsive">
<table class="table">
...
</table>
</div>
Example 1: In this example, we will learn about Table Always Responsive.
HTML
<!DOCTYPE html>
< html >
< head >
< link href =
rel = "stylesheet"
integrity =
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin = "anonymous" >
< title >Bootstrap 5 Table Always responsive</ title >
</ head >
< body >
< div class = "container text-center col-6" >
< h1 class = "text-success" >
GeeksforGeeks
</ h1 >
< h2 >Bootstrap 5 Table Always responsive</ h2 >
< div class = "table-responsive" >
< table class = "table" >
< thead >
< tr >
< td >State</ td >
< td >Capital</ td >
< td >State</ td >
< td >Capital</ td >
< td >State</ td >
< td >Capital</ td >
< td >State</ td >
< td >Capital</ td >
< td >State</ td >
< td >Capital</ td >
< td >State</ td >
< td >Capital</ td >
</ tr >
</ thead >
< tbody >
< tr class = "table-active" >
< td >Uttar Pradesh</ td >
< td >Lucknow</ td >
< td >Uttar Pradesh</ td >
< td >Lucknow</ td >
< td >Uttar Pradesh</ td >
< td >Lucknow</ td >
< td >Uttar Pradesh</ td >
< td >Lucknow</ td >
< td >Uttar Pradesh</ td >
< td >Lucknow</ td >
< td >Uttar Pradesh</ td >
< td >Lucknow</ td >
</ tr >
< tr >
< td >Punjab</ td >
< td >Chandigarh</ td >
< td >Punjab</ td >
< td >Chandigarh</ td >
< td >Punjab</ td >
< td >Chandigarh</ td >
< td >Punjab</ td >
< td >Chandigarh</ td >
< td >Punjab</ td >
< td >Chandigarh</ td >
< td >Punjab</ td >
< td >Chandigarh</ td >
</ tr >
< tr >
< td >Goa</ td >
< td >Panaji</ td >
< td >Goa</ td >
< td >Panaji</ td >
< td >Goa</ td >
< td >Panaji</ td >
< td >Goa</ td >
< td >Panaji</ td >
< td >Goa</ td >
< td >Panaji</ td >
< td >Goa</ td >
< td >Panaji</ td >
</ tr >
< tr >
< td >Himachal Pradesh</ td >
< td >Shimla</ td >
< td >Himachal Pradesh</ td >
< td >Shimla</ td >
< td >Himachal Pradesh</ td >
< td >Shimla</ td >
< td >Himachal Pradesh</ td >
< td >Shimla</ td >
< td >Himachal Pradesh</ td >
< td >Shimla</ td >
< td >Himachal Pradesh</ td >
< td >Shimla</ td >
</ tr >
</ tbody >
</ table >
</ div >
</ div >
</ body >
</ html >
|
Output:
Example 2: In this example, we will see table-dark and table-striped along with table-responsive.
HTML
<!DOCTYPE html>
< html >
< head >
< link href =
rel = "stylesheet"
integrity =
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin = "anonymous" >
< title >Bootstrap 5 Table Always responsive</ title >
</ head >
< body >
< div class = "container text-center col-6" >
< h1 class = "text-success" >
GeeksforGeeks
</ h1 >
< h2 >Bootstrap 5 Table Always responsive</ h2 >
< div class = "table-responsive" >
< table class = "table table-striped table-dark" >
< thead >
< tr >
< td >State</ td >
< td >Capital</ td >
< td >State</ td >
< td >Capital</ td >
< td >State</ td >
< td >Capital</ td >
< td >State</ td >
< td >Capital</ td >
< td >State</ td >
< td >Capital</ td >
< td >State</ td >
< td >Capital</ td >
</ tr >
</ thead >
< tbody >
< tr class = "table-active" >
< td >Uttar Pradesh</ td >
< td >Lucknow</ td >
< td >Uttar Pradesh</ td >
< td >Lucknow</ td >
< td >Uttar Pradesh</ td >
< td >Lucknow</ td >
< td >Uttar Pradesh</ td >
< td >Lucknow</ td >
< td >Uttar Pradesh</ td >
< td >Lucknow</ td >
< td >Uttar Pradesh</ td >
< td >Lucknow</ td >
</ tr >
< tr >
< td >Punjab</ td >
< td >Chandigarh</ td >
< td >Punjab</ td >
< td >Chandigarh</ td >
< td >Punjab</ td >
< td >Chandigarh</ td >
< td >Punjab</ td >
< td >Chandigarh</ td >
< td >Punjab</ td >
< td >Chandigarh</ td >
< td >Punjab</ td >
< td >Chandigarh</ td >
</ tr >
< tr >
< td >Goa</ td >
< td >Panaji</ td >
< td >Goa</ td >
< td >Panaji</ td >
< td >Goa</ td >
< td >Panaji</ td >
< td >Goa</ td >
< td >Panaji</ td >
< td >Goa</ td >
< td >Panaji</ td >
< td >Goa</ td >
< td >Panaji</ td >
</ tr >
< tr >
< td >Himachal Pradesh</ td >
< td >Shimla</ td >
< td >Himachal Pradesh</ td >
< td >Shimla</ td >
< td >Himachal Pradesh</ td >
< td >Shimla</ td >
< td >Himachal Pradesh</ td >
< td >Shimla</ td >
< td >Himachal Pradesh</ td >
< td >Shimla</ td >
< td >Himachal Pradesh</ td >
< td >Shimla</ td >
</ tr >
</ tbody >
</ table >
</ div >
</ div >
</ body >
</ html >
|
Output:
References: https://getbootstrap.com/docs/5.0/content/tables/#always-responsive
Last Updated :
07 Dec, 2022
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...