Tables

Q: Are buttons or badges styled correctly inside tables?

Absolutely no problem. All Bootstrap components maintain their normal styling inside tables. You can place buttons, badges, toggles, etc., inside <td> .

Q: Can tables do sorting/searching/pagination?

Bootstrap's table only handles styling. Sorting/searching/pagination need to be implemented in combination with JavaScript libraries (like DataTables).

Q: Does the scrollbar for responsive tables only appear when needed?

Yes. table-responsive sets overflow-x: auto ; a horizontal scrollbar only appears when the table width exceeds the container width, and it hides automatically when there is less content.

1. Introduction

(1) Prerequisites

Lesson 11: List Groups & Badges

(2) 🎯 What You'll Learn

Use .table to quickly beautify HTML tables
Use variations like table-striped, table-hover
Control borders with table-bordered, table-borderless
Color rows/columns with table-{color}
Create responsive tables with table-responsive

(3) The Pain Point

Alice built a user management page that needs to display user ID, name, email, registration date, and action buttons—showing a piece of data in a table is more intuitive than using cards or lists.

(4) The Solution

Tables are the core method for data display. Bootstrap's table class only requires adding a .table to a <table> to get a clean, professional table style.

(5) The Benefit

With Bootstrap's table utility classes, you can quickly create neat, professional data tables, making data clear at a glance.

2. Basic Tables

▶ Example: Basic Tables

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Table Demo</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container py-4">
    <h5>Basic Table</h5>
    <table class="table">
      <thead>
        <tr><th>#</th><th>Name</th><th>Email</th><th>Status</th></tr>
      </thead>
      <tbody>
        <tr><td>1</td><td>Alice</td><td>alice@example.com</td><td>Active</td></tr>
        <tr><td>2</td><td>Bob</td><td>bob@example.com</td><td>Active</td></tr>
        <tr><td>3</td><td>Charlie</td><td>charlie@example.com</td><td>Inactive</td></tr>
      </tbody>
    </table>

    <h5>Striped Rows</h5>
    <table class="table table-striped">
      <thead>
        <tr><th>#</th><th>Product</th><th>Price</th><th>Stock</th></tr>
      </thead>
      <tbody>
        <tr><td>1</td><td>Laptop</td><td>$1,200</td><td>15</td></tr>
        <tr><td>2</td><td>Monitor</td><td>$350</td><td>42</td></tr>
        <tr><td>3</td><td>Keyboard</td><td>$80</td><td>108</td></tr>
      </tbody>
    </table>

    <h5>Hover + Bordered</h5>
    <table class="table table-bordered table-hover">
      <thead class="table-dark">
        <tr><th>#</th><th>City</th><th>Country</th><th>Population</th></tr>
      </thead>
      <tbody>
        <tr><td>1</td><td>Tokyo</td><td>Japan</td><td>37M</td></tr>
        <tr><td>2</td><td>New York</td><td>USA</td><td>8.5M</td></tr>
        <tr><td>3</td><td>London</td><td>UK</td><td>9M</td></tr>
      </tbody>
    </table>
  </div>
</body>
</html>

▶ Try it Yourself

3. Table Variants

Class	Effect	Scenario
`table`	Basic styling (typography, margins, horizontal rules)	Minimalist table
`table-striped`	Alternating light gray background rows	Data/reports
`table-bordered`	All cells with borders	When clear separation is needed
`table-borderless`	No borders	Minimalist design
`table-hover`	Darker background on row hover	Interactive tables
`table-sm`	Compact version (padding halved)	Data-dense tables

4. Row/Column Colors

HTML

<table class="table">
  <thead>
    <tr><th>Task</th><th>Status</th><th>Due</th></tr>
  </thead>
  <tbody>
    <tr class="table-success">
      <td>Design review</td><td>Completed</td><td>Jun 10</td>
    </tr>
    <tr class="table-warning">
      <td>Frontend implementation</td><td>In Progress</td><td>Jun 20</td>
    </tr>
    <tr class="table-danger">
      <td>Database migration</td><td>Overdue</td><td>Jun 5</td>
    </tr>
  </tbody>
</table>

▶ Try it Yourself

Class	Meaning	When to Use
`table-primary`	Blue	Information row
`table-success`	Green	Success/Completed
`table-danger`	Red	Error/Overdue
`table-warning`	Yellow	Warning/In Progress
`table-info`	Cyan	Tip/Information
`table-active`	Gray	Selected/Highlighted

5. Header Colors

HTML

<table class="table">
  <thead class="table-dark">
    <tr><th>Dark Header</th><th>Column</th></tr>
  </thead>
  <tbody>
    <tr><td>Data</td><td>Data</td></tr>
  </tbody>
</table>

<table class="table">
  <thead class="table-light">
    <tr><th>Light Header</th><th>Column</th></tr>
  </thead>
  <tbody>
    <tr><td>Data</td><td>Data</td></tr>
  </tbody>
</table>

▶ Try it Yourself

6. Responsive Tables

HTML

<div class="table-responsive">
  <table class="table table-bordered">
    <thead>
      <tr><th>#</th><th>Name</th><th>Email</th><th>Phone</th><th>Address</th><th>City</th><th>Country</th><th>Status</th></tr>
    </thead>
    <tbody>
      <tr><td>1</td><td>Alice</td><td>alice@example.com</td><td>+1-555-0100</td><td>123 Main St</td><td>New York</td><td>USA</td><td>Active</td></tr>
    </tbody>
  </table>
</div>

▶ Try it Yourself

7. More Table Examples

▶ Example: Comprehensive Data Table

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Advanced Table Demo</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container py-4">
    <table class="table table-striped table-bordered table-hover">
      <thead class="table-dark">
        <tr>
          <th>Order ID</th>
          <th>Customer</th>
          <th>Product</th>
          <th>Amount</th>
          <th>Status</th>
          <th>Actions</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>#1024</td>
          <td>Alice Chen</td>
          <td>Wireless Mouse</td>
          <td>$29.99</td>
          <td><span class="badge bg-success">Shipped</span></td>
          <td><button class="btn btn-sm btn-outline-primary">View</button></td>
        </tr>
        <tr>
          <td>#1025</td>
          <td>Bob Wang</td>
          <td>Mechanical Keyboard</td>
          <td>$89.99</td>
          <td><span class="badge bg-warning">Processing</span></td>
          <td><button class="btn btn-sm btn-outline-primary">View</button></td>
        </tr>
        <tr class="table-danger">
          <td>#1026</td>
          <td>Charlie Li</td>
          <td>USB-C Hub</td>
          <td>$45.00</td>
          <td><span class="badge bg-danger">Cancelled</span></td>
          <td><button class="btn btn-sm btn-outline-primary">View</button></td>
        </tr>
        <tr>
          <td>#1027</td>
          <td>Diana Zhang</td>
          <td>Monitor Stand</td>
          <td>$34.99</td>
          <td><span class="badge bg-success">Delivered</span></td>
          <td><button class="btn btn-sm btn-outline-primary">View</button></td>
        </tr>
      </tbody>
    </table>
  </div>
</body>
</html>

▶ Try it Yourself

▶ Example: Striped Hover Table

HTML

<table class="table table-striped table-hover">
  <thead>
    <tr>
      <th>Rank</th>
      <th>Player</th>
      <th>Score</th>
      <th>Level</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>PlayerOne</td>
      <td>9,850</td>
      <td>Expert</td>
    </tr>
    <tr>
      <td>2</td>
      <td>SpeedRunner</td>
      <td>8,720</td>
      <td>Advanced</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Newbie99</td>
      <td>4,310</td>
      <td>Intermediate</td>
    </tr>
    <tr>
      <td>4</td>
      <td>GameMaster</td>
      <td>2,105</td>
      <td>Beginner</td>
    </tr>
  </tbody>
</table>

▶ Try it Yourself

▶ Example: Table with Badges and Buttons

HTML

<table class="table table-sm">
  <thead class="table-light">
    <tr>
      <th>Task</th>
      <th>Priority</th>
      <th>Assignee</th>
      <th>Due Date</th>
      <th></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Design homepage</td>
      <td><span class="badge bg-danger">High</span></td>
      <td>Alice</td>
      <td>2026-07-10</td>
      <td><button class="btn btn-success btn-sm">Complete</button></td>
    </tr>
    <tr>
      <td>Write API docs</td>
      <td><span class="badge bg-warning">Medium</span></td>
      <td>Bob</td>
      <td>2026-07-15</td>
      <td><button class="btn btn-outline-primary btn-sm">Edit</button></td>
    </tr>
    <tr>
      <td>Fix login bug</td>
      <td><span class="badge bg-danger">Critical</span></td>
      <td>Charlie</td>
      <td>2026-07-08</td>
      <td><button class="btn btn-danger btn-sm">Fix Now</button></td>
    </tr>
    <tr>
      <td>Update dependencies</td>
      <td><span class="badge bg-success">Low</span></td>
      <td>Diana</td>
      <td>2026-07-20</td>
      <td><button class="btn btn-outline-secondary btn-sm">Skip</button></td>
    </tr>
  </tbody>
</table>

▶ Try it Yourself

▶ Example: Responsive Table Demonstration

HTML

<div class="table-responsive">
  <table class="table table-bordered">
    <thead class="table-primary">
      <tr>
        <th>#</th>
        <th>Full Name</th>
        <th>Email</th>
        <th>Phone</th>
        <th>Department</th>
        <th>Role</th>
        <th>Status</th>
        <th>Joined</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>Alice Chen</td>
        <td>alice@company.com</td>
        <td>+1-555-0101</td>
        <td>Engineering</td>
        <td>Senior Developer</td>
        <td><span class="badge bg-success">Active</span></td>
        <td>2024-03-15</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Bob Wang</td>
        <td>bob@company.com</td>
        <td>+1-555-0102</td>
        <td>Design</td>
        <td>UI/UX Lead</td>
        <td><span class="badge bg-success">Active</span></td>
        <td>2024-06-01</td>
      </tr>
      <tr>
        <td>3</td>
        <td>Charlie Li</td>
        <td>charlie@company.com</td>
        <td>+1-555-0103</td>
        <td>Marketing</td>
        <td>Content Manager</td>
        <td><span class="badge bg-warning">On Leave</span></td>
        <td>2023-11-20</td>
      </tr>
    </tbody>
  </table>
</div>

▶ Try it Yourself

(1) Table Styling Options Flowchart

flowchart LR
    A[table] --> B[Basic Styling]
    A --> C[table-striped Alternating Colors]
    A --> D[table-hover Hover Highlight]
    A --> E[table-bordered Full Border]
    A --> F[table-borderless No Border]
    A --> G[table-sm Compact]
    A --> H[table-responsive Horizontal Scroll]
    H --> I[table-responsive-sm]
    H --> J[table-responsive-md]
    H --> K[table-responsive-lg]

Table Class	Effect	Typical Scenario
`table`	Basic horizontal rules + typography	Minimalist data table
`table-striped`	Odd rows light gray	Lists/Reports
`table-bordered`	All cells with borders	Financial/Statistical tables
`table-borderless`	Completely borderless	Card-style information
`table-hover`	Hover row highlights	Interactive lists
`table-sm`	Padding halved	Data-dense scenarios

Row Color	Semantics	Data Meaning
`table-primary`	Blue	Information/Selected row
`table-success`	Green	Success/Completed
`table-danger`	Red	Failure/Overdue
`table-warning`	Yellow	Warning/In Progress
`table-info`	Cyan	Tip/New Data
`table-active`	Gray	Current highlighted row

Responsive Variant	Scroll Trigger Breakpoint	Scenario
`table-responsive`	Always scrolls	Multi-column data tables
`table-responsive-sm`	<576px	Mobile adaptation
`table-responsive-md`	<768px	Tablet adaptation
`table-responsive-lg`	<992px	Small desktop screens
`table-responsive-xl`	<1200px	Large screen adaptation

❓ FAQ

Q Are buttons or badges styled correctly inside tables?

A Absolutely no problem. All Bootstrap components maintain their normal styling inside tables. You can place buttons, badges, toggles, etc., inside <td>.

Q Can tables do sorting/searching/pagination?

A Bootstrap's table only handles styling. Sorting/searching/pagination need to be implemented in combination with JavaScript libraries (like DataTables).

Q Will table-striped and table-hover conflict in row colors when used together?

A No. Color hierarchy: Row color > hover > striped. Colored rows will darken slightly on hover.

Q Does the scrollbar for responsive tables only appear when needed?

A Yes. table-responsive sets overflow-x: auto; a horizontal scrollbar only appears when the table width exceeds the container width, and it hides automatically when there is less content.

Q Can table-striped be used with custom row colors (like table-success)?

A Yes. Custom row colors have higher priority than striping; a row with table-success applied will not be overridden by the striping. If you need colored rows to also participate in alternating colors, it's recommended to use custom CSS only.

📖 Summary

.table for basic styling, table-striped for alternating row colors, table-hover for hover effects.
table-bordered / table-borderless to control borders, table-sm for compact mode.
Row colors: table-{primary/success/danger/warning} to indicate status.
The table-responsive family solves table overflow on small screens.

📝 Exercises

⭐ Create a product inventory table: columns should include ID, Name, Category, Price, Stock Quantity, Status. The table should have table-striped + table-hover.
⭐⭐ Wrap the table from Exercise 1 in table-responsive and view it with horizontal scrolling on mobile.
⭐⭐⭐ Create a user management table: three rows of user data. Each row's last column should contain "Edit" and "Delete" buttons. The header should use table-dark.

Previous Lesson: List Groups & Badges · Next Lesson: Forms

Web-Tutorial Tech Team

A team of developers maintaining programming tutorials. Each tutorial is written and reviewed by developers with expertise in that field. We work to keep our content accurate and reliable — if you spot an issue, please let us know.

About Us

404 Not Found

Tables

1. Introduction

(1) Prerequisites

(2) 🎯 What You'll Learn

(3) The Pain Point

(4) The Solution

(5) The Benefit

2. Basic Tables

▶ Example: Basic Tables

3. Table Variants

4. Row/Column Colors

5. Header Colors

6. Responsive Tables

7. More Table Examples

▶ Example: Comprehensive Data Table

▶ Example: Striped Hover Table

▶ Example: Table with Badges and Buttons

▶ Example: Responsive Table Demonstration

(1) Table Styling Options Flowchart

❓ FAQ

📖 Summary

📝 Exercises

🙏 帮我们做得更好