<!DOCTYPE html>
<html>
<head>
<title>Responsive Bootstrap Table</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<style>
/* Fixed Table */
.table-container {
max-height: 500px;
overflow-y: auto;
}
/* Custom CSS for sticky header */
.sticky-header {
position: relative;
}
.sticky-header thead th {
position: sticky;
top: 0;
background-color: #067d7f;
z-index: 1;
color: #e0e0e0;
}
/* Add some basic styling to table rows and alternate row colors */
.table tbody tr:nth-child(odd) {
background-color: white; /* white for odd rows */
}
.table tbody tr:hover {
background-color: white; /* Gray on hover effect */
}
.table td,
.table th {
padding: 12px; /* Add some padding to the cells */
white-space: nowrap; /* Prevent table cell text from wrapping */
}
/* Add styles to buttons */
.table button {
margin-right: 5px;
padding: 6px 12px;
border: none;
border-radius: 4px;
color: #fff;
cursor: pointer;
}
.table button.Successful {
background-color: #28a745; /* Green for Successful button */
}
.table button.Delete {
background-color: #dc3545; /* Red for Delete button */
}
/* Custom CSS for vertical and horizontal scrolling on small screens */
@media (max-width: 768px) {
.table-container {
display: none; /* Hide table on small screens */
}
.card-container {
display: block; /* Show cards on small screens */
}
.card {
margin: 10px;
}
}
/* Show table on larger screens */
@media (min-width: 769px) {
.table-container {
display: block;
}
.card-container {
display: none;
}
}
</style>
</head>
<body>
<div class="container m-4">
<!-- Table on larger screens -->
<div class="table-container">
<div class="sticky-header">
<table class="table table-bordered">
<thead>
<tr>
<th style="width: 80px;">Req Id</th>
<th>Requirement Details</th>
<th style="width: 120px;">Status</th>
<th style="width: 20%;">Action</th>
</tr>
</thead>
<tbody>
<!-- Table rows (keep the same) -->
<tr>
<td>REQ 122</td>
<td>Fancy,66s,Slub, Yes Ringspun, Warp Fancy Blends</td>
<td>Successful</td>
<td>
<button class="Successful">Successful</button>
<button class="Delete">Delete</button>
</td>
</tr>
<tr>
<td>REQ 122</td>
<td>Fancy,66s,Slub, Yes Ringspun, Warp Fancy Blends</td>
<td>Successful</td>
<td>
<button class="Successful">Successful</button>
<button class="Delete">Delete</button>
</td>
</tr>
<tr>
<td>REQ 122</td>
<td>Fancy,66s,Slub, Yes Ringspun, Warp Fancy Blends</td>
<td>Successful</td>
<td>
<button class="Successful">Successful</button>
<button class="Delete">Delete</button>
</td>
</tr>
<tr>
<td>REQ 122</td>
<td>Fancy,66s,Slub, Yes Ringspun, Warp Fancy Blends</td>
<td>Successful</td>
<td>
<button class="Successful">Successful</button>
<button class="Delete">Delete</button>
</td>
</tr>
<tr>
<td>REQ 122</td>
<td>Fancy,66s,Slub, Yes Ringspun, Warp Fancy Blends</td>
<td>Successful</td>
<td>
<button class="Successful">Successful</button>
<button class="Delete">Delete</button>
</td>
</tr>
<tr>
<td>REQ 122</td>
<td>Fancy,66s,Slub, Yes Ringspun, Warp Fancy Blends</td>
<td>Successful</td>
<td>
<button class="Successful">Successful</button>
<button class="Delete">Delete</button>
</td>
</tr>
<tr>
<td>REQ 122</td>
<td>Fancy,66s,Slub, Yes Ringspun, Warp Fancy Blends</td>
<td>Successful</td>
<td>
<button class="Successful">Successful</button>
<button class="Delete">Delete</button>
</td>
</tr>
<tr>
<td>REQ 122</td>
<td>Fancy,66s,Slub, Yes Ringspun, Warp Fancy Blends</td>
<td>Successful</td>
<td>
<button class="Successful">Successful</button>
<button class="Delete">Delete</button>
</td>
</tr>
<tr>
<td>REQ 122</td>
<td>Fancy,66s,Slub, Yes Ringspun, Warp Fancy Blends</td>
<td>Successful</td>
<td>
<button class="Successful">Successful</button>
<button class="Delete">Delete</button>
</td>
</tr>
<tr>
<td>REQ 122</td>
<td>Fancy,66s,Slub, Yes Ringspun, Warp Fancy Blends</td>
<td>Successful</td>
<td>
<button class="Successful">Successful</button>
<button class="Delete">Delete</button>
</td>
</tr>
<tr>
<td>REQ 122</td>
<td>Fancy,66s,Slub, Yes Ringspun, Warp Fancy Blends</td>
<td>Successful</td>
<td>
<button class="Successful">Successful</button>
<button class="Delete">Delete</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- Cards on smaller screens -->
<div class="card-container">
<!-- Loop for each table row -->
<div class="row">
<div class="col-md-6 mx-auto">
<div class="card">
<div class="card-body">
<p class="card-title"><span><b>Req ID :</b></span> 122</p>
<p class="card-text"><span><b>Requirement Details : </b></span>Fancy,66s,Slub, Yes Ringspun, Warp Fancy Blends</p>
<p class="card-text"><span><b>Status :</b></span> Successful</p>
<button class="btn btn-success">Successful</button>
<button class="btn btn-danger">Delete</button>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 mx-auto">
<div class="card">
<div class="card-body">
<p class="card-title"><span><b>Req ID :</b></span> 122</p>
<p class="card-text"><span><b>Requirement Details : </b></span>Fancy,66s,Slub, Yes Ringspun, Warp Fancy Blends</p>
<p class="card-text"><span><b>Status :</b></span> Successful</p>
<button class="btn btn-success">Successful</button>
<button class="btn btn-danger">Delete</button>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 mx-auto">
<div class="card">
<div class="card-body">
<p class="card-title"><span><b>Req ID :</b></span> 122</p>
<p class="card-text"><span><b>Requirement Details : </b></span>Fancy,66s,Slub, Yes Ringspun, Warp Fancy Blends</p>
<p class="card-text"><span><b>Status :</b></span> Successful</p>
<button class="btn btn-success">Successful</button>
<button class="btn btn-danger">Delete</button>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 mx-auto">
<div class="card">
<div class="card-body">
<p class="card-title"><span><b>Req ID :</b></span> 122</p>
<p class="card-text"><span><b>Requirement Details :</b></span>Fancy,66s,Slub, Yes Ringspun, Warp Fancy Blends</p>
<p class="card-text"><span><b>Status :</b></span> Successful</p>
<button class="btn btn-success">Successful</button>
<button class="btn btn-danger">Delete</button>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 mx-auto">
<div class="card">
<div class="card-body">
<p class="card-title"><span><b>Req ID :</b></span> 122</p>
<p class="card-text"><span><b>Requirement Details : </b></span>Fancy,66s,Slub, Yes Ringspun, Warp Fancy Blends</p>
<p class="card-text"><span><b>Status :</b></span> Successful</p>
<button class="btn btn-success">Successful</button>
<button class="btn btn-danger">Delete</button>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 mx-auto">
<div class="card">
<div class="card-body">
<p class="card-title"><span><b>Req ID :</b></span> 122</p>
<p class="card-text"><span><b>Requirement Details : </b></span>Fancy,66s,Slub, Yes Ringspun, Warp Fancy Blends</p>
<p class="card-text"><span><b>Status :</b></span> Successful</p>
<button class="btn btn-success">Successful</button>
<button class="btn btn-danger">Delete</button>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 mx-auto">
<div class="card">
<div class="card-body">
<p class="card-title"><span><b>Req ID :</b></span> 122</p>
<p class="card-text"><span><b>Requirement Details : </b></span>Fancy,66s,Slub, Yes Ringspun, Warp Fancy Blends</p>
<p class="card-text"><span><b>Status :</b></span> Successful</p>
<button class="btn btn-success">Successful</button>
<button class="btn btn-danger">Delete</button>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 mx-auto">
<div class="card">
<div class="card-body">
<p class="card-title"><span><b>Req ID :</b></span> 122</p>
<p class="card-text"><span><b>Requirement Details : </b></span>Fancy,66s,Slub, Yes Ringspun, Warp Fancy Blends</p>
<p class="card-text"><span><b>Status :</b></span> Successful</p>
<button class="btn btn-success">Successful</button>
<button class="btn btn-danger">Delete</button>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 mx-auto">
<div class="card">
<div class="card-body">
<p class="card-title"><span><b>Req ID :</b></span> 122</p>
<p class="card-text"><span><b>Requirement Details : </b></span>Fancy,66s,Slub, Yes Ringspun, Warp Fancy Blends</p>
<p class="card-text"><span><b>Status :</b></span> Successful</p>
<button class="btn btn-success">Successful</button>
<button class="btn btn-danger">Delete</button>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 mx-auto">
<div class="card">
<div class="card-body">
<p class="card-title"><span><b>Req ID :</b></span> 122</p>
<p class="card-text"><span><b>Requirement Details : </b></span>Fancy,66s,Slub, Yes Ringspun, Warp Fancy Blends</p>
<p class="card-text"><span><b>Status :</b></span> Successful</p>
<button class="btn btn-success">Successful</button>
<button class="btn btn-danger">Delete</button>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 mx-auto">
<div class="card">
<div class="card-body">
<p class="card-title"><span><b>Req ID :</b></span> 122</p>
<p class="card-text"><span><b>Requirement Details : </b></span>Fancy,66s,Slub, Yes Ringspun, Warp Fancy Blends</p>
<p class="card-text"><span><b>Status :</b></span> Successful</p>
<button class="btn btn-success">Successful</button>
<button class="btn btn-danger">Delete</button>
</div>
</div>
</div>
</div>
<!-- Repeat the above card div for each row of the table -->
</div>
</div>
</body>
</html>
.png)
Social Plugin