Open In App

Bootstrap 5 Table Always responsive

Improve
Improve
Like Article
Like
Save
Share
Report

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>
    <!-- Bootstrap CDN -->
    <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>
    <!-- Bootstrap CDN -->
    <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
Previous
Next
Share your thoughts in the comments
Similar Reads