Bootstrap 5 Responsive Tables

Bootstrap 5 responsive table has ability to scroll the table horizontally. You can make the table always responsive for all the breakpoint or make the table responsive for a specific breakpoint such as sm,md,xl, lg, and xxl.
There are two ways to make the Bootstrap 5 table responsive.

Table Responsive At All Breakpoint
Responsive Table At Specific Breakpoint

Table Responsive At All Breakpoint - It is generally used for horizontal scrolling of the table across the entire width of the screen. To make the table always responsive, simply wrap the table inside an external wrapper, i.e., div, and assign it to the .table-responsive class.

General Syntax

      <div class="table-responsive">
     <table class="table"></table>
</div>

Source Code

          <div class="table-responsive mt-5">
   <table class="table table-bordered">
      <thead>
         <tr>
            <th>#</th>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Work</th>
         </tr>
      </thead>
      <tbody>
         <tr>
            <td>1</td>
            <td>Smith</td>
            <td>Jane</td>
            <td>Web Designer</td>
         </tr>
         <tr>
            <td>2</td>
            <td>John</td>
            <td>Doe</td>
            <td>Graphics Designer</td>
         </tr>
         <tr>
            <td>3</td>
            <td>Andre</td>
            <td>Ren</td>
            <td>Developer</td>
         </tr>
      </tbody>
   </table>
</div>

Source Code:Output

#	First Name	Last Name	Work
1	Smith	Jane	Web Designer
2	John	Doe	Graphics Designer
3	Andre	Ren	Developer

The .table-responsive class makes the table responsive at all breakpoints i.e. {sm | md| lg | xl | xxl}.

Table Responsive At Specific Breakpoint: This is used to make the table responsive for the specified breakpoints, such as {sm | md| lg | xl| xxl}. The .table-responsive{-sm|-md|-lg|-xl|-xxl} class creates a responsive table up to a specific breakpoint and from that breakpoint and up, the table behaves normally and does not scroll horizontally. Here * denotes one of from the following lists: { sm, md, lg, xl,xxl}.

General Syntax

      <div class="table-responsive{-sm|-md|-lg|-xl|-xxl}">
     <table class="table">
         ...
     </table>
</div>

Source Code

          <div class="table-responsive-sm mt-5">
   <table class="table table-bordered">
      <thead>
         <tr>
            <th>#</th>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Work</th>
         </tr>
      </thead>
      <tbody>
         <tr>
            <td>1</td>
            <td>Smith</td>
            <td>Jane</td>
            <td>Web Designer</td>
         </tr>
         <tr>
            <td>2</td>
            <td>John</td>
            <td>Doe</td>
            <td>Graphics Designer</td>
         </tr>
         <tr>
            <td>3</td>
            <td>Andre</td>
            <td>Ren</td>
            <td>Developer</td>
         </tr>
      </tbody>
   </table>
</div>

Source Code:Output

#	First Name	Last Name	Work
1	Smith	Jane	Web Designer
2	John	Doe	Graphics Designer
3	Andre	Ren	Developer

Online Test / Quiz

Question set 1

Web Tutorials

How To Make Bootstrap 5 Responsive Tables

Html Tutorial HTML

Javascript Tutorial JAVASCRIPT

Css Tutorial CSS

Bootstrap 5 Tutorial BOOTSTRAP 5

Bootstrap 4 Tutorial BOOTSTRAP 4