0
0
Bootsrapmarkup~5 mins

Small and compact tables in Bootsrap

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Introduction

Small and compact tables help show data neatly in less space. They make tables easier to read on small screens or when you want a simple look.

When you want to show a list of items without taking much space on the page.
When viewing tables on mobile devices where screen space is limited.
When you want a clean and simple table style without extra padding.
When you need to fit many rows on one screen without scrolling too much.
Syntax
Bootsrap
<table class="table table-sm">
  ... table content ...
</table>

Use the table-sm class with the table class to make the table compact.

This reduces the padding inside table cells, making rows smaller.

Examples
A small table with two rows and three columns using table-sm for compact spacing.
Bootsrap
<table class="table table-sm">
  <thead>
    <tr>
      <th>#</th>
      <th>Name</th>
      <th>Age</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Alice</td>
      <td>25</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Bob</td>
      <td>30</td>
    </tr>
  </tbody>
</table>
A compact table with borders around cells using table-bordered and table-sm.
Bootsrap
<table class="table table-bordered table-sm">
  <thead>
    <tr>
      <th>Product</th>
      <th>Price</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Pen</td>
      <td>$1</td>
    </tr>
    <tr>
      <td>Notebook</td>
      <td>$3</td>
    </tr>
  </tbody>
</table>
Sample Program

This example shows a small, striped table with less padding using Bootstrap's table-sm class. It is responsive and accessible with proper aria-label and scope attributes.

Bootsrap
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Small and Compact Table Example</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@4.2.1/dist/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
  <main class="container my-4">
    <h1>Small and Compact Table</h1>
    <p>This table uses Bootstrap's <code>table-sm</code> class for a compact look.</p>
    <table class="table table-striped table-sm" aria-label="Small compact table example">
      <thead>
        <tr>
          <th scope="col">ID</th>
          <th scope="col">Name</th>
          <th scope="col">City</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>1</td>
          <td>Emma</td>
          <td>New York</td>
        </tr>
        <tr>
          <td>2</td>
          <td>Liam</td>
          <td>Chicago</td>
        </tr>
        <tr>
          <td>3</td>
          <td>Olivia</td>
          <td>San Francisco</td>
        </tr>
      </tbody>
    </table>
  </main>
</body>
</html>
OutputSuccess
Important Notes

Always add aria-label or caption for accessibility so screen readers understand the table.

Use table-striped or table-bordered with table-sm to improve readability if needed.

Compact tables are great for mobile views but make sure text is still readable.

Summary

Use table-sm class with Bootstrap tables to make them small and compact.

Compact tables save space and improve readability on small screens.

Combine with other Bootstrap table classes for better style and accessibility.