Responsive tables
Wide tables become horizontally scrollable on small screens instead of breaking the layout.
In this page:
Syntax
<div class="table-responsive">
<table class="table">...</table>
</div>Responsive tables
Wrap a .table in .table-responsive (or .table-responsive-md to scroll only below md). Bootstrap tables also offer .table-striped, .table-hover, .table-bordered, .table-sm and colour variants. Keep the number of columns reasonable for mobile.
Note:
table-responsive adds a horizontal scrollbar only when needed.
Example: Responsive tables
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body class="p-3">
<div class="container">
<div class="table-responsive">
<table class="table table-striped table-hover">
<thead><tr><th>#</th><th>Name</th><th>Role</th><th>City</th><th>Email</th><th>Joined</th></tr></thead>
<tbody>
<tr><td>1</td><td>Ada</td><td>Engineer</td><td>London</td><td>[email protected]</td><td>2024-01-05</td></tr>
<tr><td>2</td><td>Linus</td><td>Maintainer</td><td>Portland</td><td>[email protected]</td><td>2024-02-11</td></tr>
</tbody>
</table>
</div>
</div>
</body>
</html>Live Example
Related Topics
Common Mistakes
- Forgetting the responsive wrapper
- Too many columns for phones
- Putting table-responsive on the table element
Chapter Summary
- table-responsive on a wrapper
- Breakpoint versions exist
- table-striped and table-hover style rows
- Wrapper, not the table itself
🔒
Chapter Quiz — Complete all 7 topics to unlock
0/7 topics done
Complete these topics first: