Bootstrap 5 Table Always responsive Last Updated : 30 Jul, 2024 Comments Improve Suggest changes Like Article Like 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= "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" 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= "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" 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 Create Quiz Comment 21mcsrltd Follow 0 Improve 21mcsrltd Follow 0 Improve Article Tags : Technical Scripter Web Technologies Bootstrap Technical Scripter 2022 Explore Bootstrap 5 Tutorial 6 min read Bootstrap 5 Introduction 4 min read LayoutBootstrap 5 Layout Breakpoints 3 min read Bootstrap 5 Layout Containers 3 min read BootStrap 5 Layout Grid System 3 min read Bootstrap 5 Columns 2 min read Bootstrap 5 Gutters 2 min read Bootstrap 5 Utilities 2 min read Bootstrap 5 Z-index 2 min read ContentBootstrap Reboot 2 min read Bootstrap 5 Typography 2 min read Bootstrap 5 Images 1 min read Bootstrap 5 Tables 2 min read Bootstrap 5 Figures 2 min read FormsBootstrap-5 Forms 2 min read Bootstrap 5 Form Controls 2 min read Bootstrap 5 Select 2 min read Bootstrap 5 Checks and Radios 2 min read Bootstrap 5 Range 2 min read Bootstrap 5 Input Group 3 min read Bootstrap 5 Floating labels 2 min read Forms LayoutBootstrap 5 Layout Forms 2 min read Bootstrap5 Layout Utilities 2 min read Bootstrap 5 Layout Form Grid 2 min read Bootstrap 5 Layout Gutters 2 min read Bootstrap 5 Layout Horizontal form 2 min read Bootstrap 5 Layout Horizontal form label sizing 2 min read Bootstrap 5 Layout Column sizing 2 min read Bootstrap 5 Layout Auto-sizing 2 min read Bootstrap 5 Layout Inline forms 2 min read Bootstrap 5 Validation 4 min read ComponentsBootstrap 5 Accordion 3 min read Bootstrap 5 Alerts 2 min read Bootstrap 5 Badges 2 min read Bootstrap Breadcrumb 2 min read Bootstrap 5 Buttons 3 min read Bootstrap 5 | Button group 4 min read Bootstrap 5 | Card 11 min read Bootstrap 5 Carousel 3 min read Bootstrap 5 | Close button 1 min read Bootstrap 5 Collapse 3 min read Bootstrap 5 Dropdowns 9 min read Bootstrap 5 List group 5 min read Bootstrap 5 Modal 7 min read NavbarBootstrap 5 Navbar Brand 3 min read Bootstrap 5 Navbar Brand Text 2 min read Bootstrap Navbar Brand Image 2 min read Bootstrap 5 Navbar Nav 2 min read Bootstrap 5 Navbar Forms 2 min read Bootstrap 5 Navbar Text 2 min read Bootstrap 5 Offcanvas 12 min read Bootstrap 5 Popovers 2 min read Bootstrap 5 Progress 5 min read Bootstrap 5 Scrollspy 4 min read Bootstrap 5 Spinners 3 min read Bootstrap 5 Toasts 3 min read Bootstrap 5 Tooltips 3 min read HelpersBootstrap 5 Clearfix 2 min read Bootstrap 5 Colored links 2 min read Bootstrap 5 Ratios 2 min read Bootstrap 5 Position 2 min read Bootstrap 5 Visually hidden 2 min read Bootstrap 5 Stretched link 2 min read Bootstrap 5 Text Truncation 2 min read ExtendBootstrap 5 Approach 3 min read Bootstrap 5 Icons 2 min read Like