0
0
Bootsrapmarkup~5 mins

Responsive tables in Bootsrap

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Introduction

Responsive tables help your data look good on all screen sizes. They make tables easy to read on phones, tablets, and desktops.

You want to show a list of products with details on a website that works on phones and computers.
You have a schedule or calendar table that users need to see clearly on small screens.
You want to display user information or reports that must be readable on any device.
You need to keep your website mobile-friendly without hiding important table data.
Syntax
Bootsrap
<div class="table-responsive">
  <table class="table">
    <!-- table content -->
  </table>
</div>
Wrap your <table> inside a <div> with class table-responsive.
This wrapper adds horizontal scrolling on small screens so the table does not break the layout.
Examples
This example shows a simple responsive table with three columns and two rows.
Bootsrap
<div class="table-responsive">
  <table class="table">
    <thead>
      <tr>
        <th>Name</th>
        <th>Age</th>
        <th>City</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Alice</td>
        <td>30</td>
        <td>New York</td>
      </tr>
      <tr>
        <td>Bob</td>
        <td>25</td>
        <td>Chicago</td>
      </tr>
    </tbody>
  </table>
</div>
This example adds table-striped for alternating row colors, improving readability.
Bootsrap
<div class="table-responsive">
  <table class="table table-striped">
    <thead>
      <tr>
        <th>Product</th>
        <th>Price</th>
        <th>Stock</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Book</td>
        <td>$10</td>
        <td>100</td>
      </tr>
      <tr>
        <td>Pen</td>
        <td>$2</td>
        <td>500</td>
      </tr>
    </tbody>
  </table>
</div>
Sample Program

This complete page shows a responsive table with country data. On small screens, the table scrolls horizontally so all columns remain visible.

Bootsrap
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Responsive Table Example</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
  <main class="container my-4">
    <h1>Responsive Table Demo</h1>
    <div class="table-responsive">
      <table class="table table-bordered">
        <thead class="table-light">
          <tr>
            <th>Country</th>
            <th>Capital</th>
            <th>Population (millions)</th>
            <th>Language</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>France</td>
            <td>Paris</td>
            <td>67</td>
            <td>French</td>
          </tr>
          <tr>
            <td>Japan</td>
            <td>Tokyo</td>
            <td>126</td>
            <td>Japanese</td>
          </tr>
          <tr>
            <td>Brazil</td>
            <td>Brasília</td>
            <td>213</td>
            <td>Portuguese</td>
          </tr>
        </tbody>
      </table>
    </div>
  </main>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
OutputSuccess
Important Notes

Responsive tables add a horizontal scrollbar on small screens instead of breaking the layout.

Always use semantic table elements like <thead>, <tbody>, and <th> for accessibility.

Test your tables on different screen sizes using browser DevTools to see the responsive effect.

Summary

Wrap tables in div.table-responsive to make them scroll on small screens.

Use Bootstrap table classes like table, table-striped, and table-bordered for styling.

Responsive tables keep your data readable on phones, tablets, and desktops.