table
Bootstrap's Table component lets you apply styles such as striping, hover highlighting, and borders to a standard HTML table simply by adding classes. It also offers responsive behavior and a rich set of color variants, making it easy to present tabular data in a clean, organized layout.
Syntax
<!-- Basic Table -->
<table class="table">
<thead>
<tr><th>Name</th><th>Role</th><th>Department</th></tr>
</thead>
<tbody>
<tr><td>user1</td><td>Engineer</td><td>Development</td></tr>
<tr><td>user2</td><td>Designer</td><td>Design</td></tr>
</tbody>
</table>
<!-- Table combining striped, hover, and bordered styles -->
<table class="table table-striped table-hover table-bordered">
<thead class="table-dark">
<tr><th>Name</th><th>Role</th><th>Department</th></tr>
</thead>
<tbody>
<tr><td>user1</td><td>Engineer</td><td>Development</td></tr>
<tr><td>user2</td><td>Designer</td><td>Design</td></tr>
</tbody>
</table>
<!-- Responsive: table-responsive enables horizontal scrolling -->
<div class="table-responsive">
<table class="table">
<!-- Tables with many columns can be scrolled horizontally on small screens -->
</table>
</div>
Table Class Reference
| Class | Description |
|---|---|
table | The base class that enables Bootstrap table styles. Required on every Bootstrap table. |
table-striped | Applies zebra striping by alternating the background color of odd and even rows. |
table-striped-columns | Applies striping to columns instead of rows. |
table-hover | Highlights the row under the mouse cursor. |
table-bordered | Adds borders to all cells. |
table-borderless | Removes all borders from the table. |
table-sm | Reduces cell padding for a more compact layout. |
table-dark | Applies a dark background to the entire table or to a header row. |
table-light | Applies a light background to the entire table or to a header row. |
table-primary | Applies a primary (blue) background to the table, row, or cell. |
table-secondary | Applies a secondary (gray) background to the table, row, or cell. |
table-success | Applies a green background to indicate success on the table, row, or cell. |
table-danger | Applies a red background to indicate danger on the table, row, or cell. |
table-warning | Applies a yellow background to indicate a warning on the table, row, or cell. |
table-info | Applies a light-blue background to indicate informational content on the table, row, or cell. |
table-active | Applies the active-state highlight color to the table, row, or cell. |
table-responsive | Wrap the table in a <div> with this class to enable horizontal scrolling and prevent overflow on small screens. |
table-responsive-{breakpoint} | Enables horizontal scrolling only below the specified breakpoint (e.g., table-responsive-md). |
caption-top | Moves the <caption> element to the top of the table (the default position is the bottom). |
Sample Code
An example of a basic table combining striping, hover highlighting, and a dark header.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Table Sample</title>
<!-- Load Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container mt-4">
<!-- caption-top: displays the caption above the table -->
<table class="table table-striped table-hover caption-top">
<caption>Employee List (FY2024)</caption>
<!-- table-dark: applies a dark background to the header row -->
<thead class="table-dark">
<tr>
<th>#</th>
<th>Name</th>
<th>Role</th>
<th>Department</th>
</tr>
</thead>
<tbody>
<!-- table-striped alternates the background color every other row -->
<tr>
<td>1</td>
<td>user1</td>
<td>Engineer</td>
<td>Development</td>
</tr>
<tr>
<td>2</td>
<td>user2</td>
<td>Designer</td>
<td>Design</td>
</tr>
<!-- table-success: highlights a specific row with a green background -->
<tr class="table-success">
<td>3</td>
<td>user3</td>
<td>Manager</td>
<td>Sales</td>
</tr>
<tr>
<td>4</td>
<td>user4</td>
<td>Writer</td>
<td>Communications</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
An example of enabling horizontal scrolling with responsive behavior for a table that has many columns.
<div class="container mt-4">
<!-- table-responsive: prevents the table from overflowing horizontally on small screens -->
<div class="table-responsive">
<table class="table table-bordered table-sm">
<thead class="table-light">
<tr>
<th>Product Code</th>
<th>Product Name</th>
<th>Category</th>
<th>Stock</th>
<th>Unit Price</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr>
<td>A-001</td>
<td>Laptop</td>
<td>Electronics</td>
<td>12</td>
<td>$980</td>
<!-- table-success on a cell to color-code stock availability -->
<td class="table-success">In Stock</td>
</tr>
<tr>
<td>A-002</td>
<td>Wireless Mouse</td>
<td>Peripherals</td>
<td>0</td>
<td>$35</td>
<!-- table-danger on a cell to indicate out-of-stock in red -->
<td class="table-danger">Out of Stock</td>
</tr>
<tr>
<td>A-003</td>
<td>USB Hub</td>
<td>Peripherals</td>
<td>3</td>
<td>$28</td>
<!-- table-warning on a cell to indicate low stock in yellow -->
<td class="table-warning">Low Stock</td>
</tr>
</tbody>
</table>
</div>
</div>
Overview
Bootstrap's Table component applies clean, consistent styles to a <table> element simply by adding the table class. You can further enhance it with table-striped for zebra striping, table-hover for hover highlighting, and table-bordered to add borders to all cells. These classes can be freely combined.
Applying color classes such as table-success, table-danger, and table-warning to individual rows or cells lets you communicate data status visually at a glance. Using table-dark or table-light on a <thead> element changes the color of the header row only.
When a table has many columns, wrapping it in <div class="table-responsive"> enables horizontal scrolling on small screens so content remains accessible. Using a breakpoint variant like table-responsive-md activates scrolling only below that breakpoint width.
Related pages: Container / Grid System / Card
If you find any errors or copyright issues, please contact us.
シェアする