LearnAI ToolsCareerPractice BuildsPlayContact
Lesson 2315 min read

Tables

Learn how to style HTML tables with Bootstrap classes including striped rows, hover states, borders, and responsive wrappers.

Introduction

Bootstrap does not replace the native HTML <table> element — it enhances it. A single .table class adds sensible padding, spacing, and horizontal dividers to any plain table, and a handful of modifier classes layer on striping, hover highlighting, borders, contextual colors, and responsive scrolling. In this lesson you will style a table from a bare HTML skeleton up to a fully responsive, color-coded data grid.

What You Will Learn
  • The base .table class and its default styling.
  • Striped, hover, bordered, and borderless variants.
  • Contextual row and cell coloring.
  • Making a table horizontally scrollable on small screens.

Basic Table

Start with standard <table>, <thead>, <tbody>, <tr>, <th>, and <td> markup, then add class="table" to the <table> element itself.

<table class="table">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">Name</th>
      <th scope="col">Role</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Aditi Sharma</td>
      <td>Frontend Developer</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Rahul Verma</td>
      <td>Backend Developer</td>
    </tr>
  </tbody>
</table>
Result

Click Run to see what this code prints.

Striped Rows

Add .table-striped to zebra-stripe alternating rows using nth-child, which makes long tables much easier to scan.

<table class="table table-striped">
  <!-- thead / tbody as before -->
</table>

Hover State

Add .table-hover to highlight a row's background when the user's mouse passes over it, useful for tables where each row represents a clickable record.

<table class="table table-striped table-hover">
  <!-- thead / tbody as before -->
</table>

Bordered & Borderless

.table-bordered adds borders on all sides of every cell, including the outer edge. .table-borderless removes borders entirely for a cleaner, minimal look.

<table class="table table-bordered">...</table>
<table class="table table-borderless">...</table>

Contextual Colors

Apply contextual classes to individual <tr> or <td>/<th> elements to convey meaning, matching Bootstrap's standard color palette.

<table class="table">
  <tbody>
    <tr class="table-primary"><td>Primary row</td></tr>
    <tr class="table-success"><td>Success row</td></tr>
    <tr class="table-danger"><td>Danger row</td></tr>
    <tr>
      <td>Regular row with one flagged cell</td>
      <td class="table-warning">Needs review</td>
    </tr>
  </tbody>
</table>
ClassTypical Use
table-primaryHighlighted/featured row
table-successCompleted or positive status
table-dangerError or critical status
table-warningNeeds attention
table-infoInformational note
table-light / table-darkSubtle neutral emphasis

Small Tables

Add .table-sm to cut cell padding in half, producing a more compact table — handy for dashboards with many rows.

<table class="table table-sm table-striped">
  <!-- thead / tbody -->
</table>

Responsive Tables

Wide tables overflow on small screens. Wrap the <table> in a <div class="table-responsive"> to make it scroll horizontally instead of breaking the page layout. Breakpoint-specific variants like .table-responsive-md apply the scrolling only below that breakpoint.

<div class="table-responsive">
  <table class="table table-striped table-bordered">
    <!-- a table with many columns -->
  </table>
</div>
Result

Click Run to see what this code prints.

Common Mistakes

Avoid These Mistakes
  • Forgetting the .table base class — the modifier classes alone (striped, hover, etc.) do nothing without it.
  • Not wrapping wide tables in .table-responsive, causing horizontal page overflow on mobile.
  • Using <div> layouts instead of real <table> markup, which breaks accessibility and loses Bootstrap's table styling entirely.
  • Missing scope="col" / scope="row" on header cells, which hurts screen reader table navigation.
  • Overusing contextual row colors until the table becomes visually noisy rather than clearer.

Best Practices

  • Always wrap data tables in .table-responsive unless you are certain they will never overflow.
  • Use <caption> to describe a table's purpose for assistive technology, even if visually hidden.
  • Reserve contextual colors for meaningful states, not decoration.
  • Combine .table-striped and .table-hover for long, scannable, interactive lists.
  • Use .table-sm on data-dense admin dashboards where vertical space is limited.

Frequently Asked Questions

Yes — striped, hover, bordered, small, and contextual coloring can all be combined on the same <table> element, e.g. class="table table-striped table-hover table-sm".

Yes. Add .table-dark to the <table> for a fully dark table, or use data-bs-theme="dark" on a wrapping element if you are using Bootstrap's color mode system.

It likely is missing the .table-responsive wrapper <div> — the scrolling behavior comes from that wrapper, not from any class on the <table> itself.

Key Takeaways

  • .table is the required base class; every other table class is a modifier on top of it.
  • table-striped, table-hover, table-bordered, and table-sm can be freely combined.
  • Contextual classes like table-success apply to individual rows or cells for meaning.
  • Wrap wide tables in .table-responsive to avoid breaking mobile layouts.

Summary

Bootstrap's table utilities turn plain HTML tables into clean, readable, responsive data grids with just a handful of classes, no custom CSS required. Next, you will learn about list groups — a flexible component for displaying and selecting from lists of content.

Next Lesson →

List Groups