How to use the table-scrollable class In Bootstrap
Creating a “table-scrollable” class involves adding custom CSS to create a fixed-height div wrapping the table with overflow-y for vertical scrolling. This maintains fixed headers while enabling horizontal scrolling and consistent column widths across screen sizes.
Example: To demonstrate creating a responsive table using table-scrollable class showcasing students’ information with columns such as Index, First Name, Last Name, Age, and Enrolled Course.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sticky Footer with Bootstrap 5</title>
<!-- Bootstrap CSS -->
<link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css"
rel="stylesheet">
<!-- Bootstrap JS (Optional if you need dropdowns or other features) -->
<script src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js">
</script>
</head>
<body>
<div class="text-center py-3 mb-4 border-bottom">
<h1 style="color: green;">
w3wiki Student Data:
</h1>
</div>
<div class="table-scrollable">
<table class="table table-striped
table-bordered table-hover">
<thead>
<tr>
<th>Index</th>
<th>First Name</th>
<th>Last Name</th>
<th>Age</th>
<th>Enrolled Course</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Rahul </td>
<td>Mishra</td>
<td>23</td>
<td>DSA In JAVA</td>
</tr>
<tr>
<td>2</td>
<td>Raj </td>
<td>Shukla</td>
<td>23</td>
<td>Advanced Java</td>
</tr>
<tr>
<td>3</td>
<td>Prahant </td>
<td>Shuka</td>
<td>19</td>
<td>Web Development</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Output:
How to Create a Responsive Table in Bootstrap ?
A responsive table in Bootstrap adjusts its layout to fit different screen sizes, ensuring readability and usability on all devices. It typically involves using classes like .table-responsive or custom CSS to enable horizontal scrolling on smaller screens.
Table of Content
- Using the table-responsive class
- Using the table-scrollable class
- Using the Bootstrap Grid System