How to create scrollable table bootstrap

BootstrapHow-ToBeginner · 3 min read

How to Create Scrollable Table in Bootstrap Easily

To create a scrollable table in Bootstrap, wrap your <table> inside a <div> with the class table-responsive. This container adds horizontal scrolling when the table is wider than its parent, keeping your layout neat on all screen sizes.

📐

Syntax

Use a <div> with the class table-responsive to wrap your <table>. This makes the table horizontally scrollable on small screens or when it overflows its container.

div.table-responsive: The wrapper that enables scrolling.
table: Your table element with Bootstrap classes like table, table-striped, etc.

html

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

Output

A container that allows horizontal scrolling if the table is too wide.

💻

Example

This example shows a wide table inside a table-responsive container. On small screens or narrow windows, horizontal scroll appears so you can see all columns without breaking the layout.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Scrollable Table Bootstrap Example</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container my-4">
    <h2>Scrollable Table Example</h2>
    <div class="table-responsive">
      <table class="table table-bordered table-striped">
        <thead>
          <tr>
            <th>#</th>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Email</th>
            <th>City</th>
            <th>Country</th>
            <th>Phone</th>
            <th>Company</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>1</td>
            <td>Anna</td>
            <td>Smith</td>
            <td>anna.smith@example.com</td>
            <td>New York</td>
            <td>USA</td>
            <td>+1 555 1234</td>
            <td>Example Inc.</td>
          </tr>
          <tr>
            <td>2</td>
            <td>John</td>
            <td>Doe</td>
            <td>john.doe@example.com</td>
            <td>London</td>
            <td>UK</td>
            <td>+44 20 7946 0958</td>
            <td>Widgets Ltd.</td>
          </tr>
          <tr>
            <td>3</td>
            <td>Maria</td>
            <td>Garcia</td>
            <td>maria.garcia@example.com</td>
            <td>Madrid</td>
            <td>Spain</td>
            <td>+34 91 123 4567</td>
            <td>Tech Solutions</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</body>
</html>

Output

A webpage with a bordered, striped table inside a container that scrolls horizontally if the screen is narrow.

⚠️

Common Pitfalls

Some common mistakes when creating scrollable tables in Bootstrap include:

Not wrapping the <table> inside a table-responsive container, which prevents scrolling.
Using fixed widths on table columns that break responsiveness.
Forgetting to include Bootstrap CSS, so the classes have no effect.
Placing the table-responsive class directly on the table instead of a wrapping div.

html

<!-- Wrong: table-responsive on table -->
<table class="table table-responsive">
  <!-- content -->
</table>

<!-- Right: table-responsive on div wrapper -->
<div class="table-responsive">
  <table class="table">
    <!-- content -->
  </table>
</div>

Output

The first example will not scroll properly; the second example enables horizontal scrolling.

📊

Quick Reference

Remember these key points for scrollable tables in Bootstrap:

Feature	Description
`table-responsive`	Wraps the table to enable horizontal scrolling.
`table`	Bootstrap class for styling tables.
Responsive behavior	Scroll appears only when table width exceeds container.
Use with	Works well with `table-striped`, `table-bordered`, etc.
Bootstrap version	Available in Bootstrap 4 and 5.

✅

Key Takeaways

Wrap your table inside a div with class table-responsive to enable horizontal scrolling.

Do not put table-responsive class directly on the table element.

Ensure Bootstrap CSS is included for styles and responsiveness to work.

Scrollable tables keep your layout neat on small screens without breaking content.

Combine table-responsive with other Bootstrap table classes for better style.