<div class="p-5">
<div class="pb-4 px-0 px-lg-4 row">
<div class="col-12">
<h2 class="text-primary">Traditional Way of HTML Responsive Table</h2>
<hr>
<h3 class="text-success d-none d-md-block mb-3">Desktop View</h3>
<h3 class="text-danger d-md-none mb-3">Mobile View</h3>
<div class="border cm-scrollbar cm-table-w-scroll table-responsive">
<table class="table table-borderless table-sm table-bordered">
<thead>
<tr class="bg-primary">
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Date of Birth</th>
<th>Email</th>
<th>Phone</th>
<th>Occupation</th>
<th>Company</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Joseph</td>
<td>Thompson</td>
<td>20/09/1983</td>
<td> joseph@gmail.com </td>
<td> 815-398-#### </td>
<td> Foundry mold and coremaker </td>
<td> Desert Garden Help </td>
</tr>
<tr>
<td>2</td>
<td>Lynn</td>
<td>Rodman</td>
<td>20/09/1988</td>
<td> lynn.rodman@dayrep.com </td>
<td> 972-763-#### </td>
<td> Geotechnical engineer </td>
<td> New World Realty </td>
</tr>
<tr>
<td>3</td>
<td>Monica</td>
<td>Yocum</td>
<td>18/03/1964</td>
<td> contact@monica.com </td>
<td> 586-350-#### </td>
<td> Assistant editor </td>
<td> Happy Family </td>
</tr>
<tr>
<td>4</td>
<td>Brett</td>
<td>Garcia</td>
<td>20/09/1997</td>
<td> brett.garcia@sambos.com </td>
<td> 574-735-#### </td>
<td> Polisher </td>
<td> Sambo's </td>
</tr>
<tr>
<td>5</td>
<td>Billy</td>
<td>Mitcham</td>
<td>10/05/1994</td>
<td> billy.mitcham@teleworm.us</td>
<td> 818-723-#### </td>
<td> Product designer </td>
<td> Audio Visions </td>
</tr>
<tr>
<td>6</td>
<td>Thomas</td>
<td>Duerr</td>
<td>20/09/1997</td>
<td> thomas-duerr@jourrapide.com</td>
<td> 715-578-#### </td>
<td>Service technician</td>
<td>Destiny Realty</td>
</tr>
<tr>
<td>7</td>
<td>Patricia</td>
<td>McCranie</td>
<td>30/11/1999</td>
<td> patricia239@mccranie.com </td>
<td>440-266-####</td>
<td>Risk manager</td>
<td>Herman's World</td>
</tr>
<tr>
<td>8</td>
<td>James</td>
<td> Wood</td>
<td>15/08/1996</td>
<td> james-wood@shareorbuy.com </td>
<td> 574-735-#### </td>
<td> Power tool repairer </td>
<td> Shareor Buy </td>
</tr>
<tr>
<td>9</td>
<td>Sidney</td>
<td>Cannon</td>
<td>05/07/1988</td>
<td> s-cannon@alp.com </td>
<td> 615-424-#### </td>
<td> Pesticide sprayer </td>
<td> A. L. Price </td>
</tr>
<tr>
<td>10</td>
<td>Michele </td>
<td>McNichols</td>
<td>13/05/1994</td>
<td> michele@record-town.com </td>
<td> 615-896-#### </td>
<td> Otorhinolaryngology nurse </td>
<td> Record Town </td>
</tr>
<tr>
<td>11</td>
<td>Catherine</td>
<td>Glaser</td>
<td>31/03/1995</td>
<td> catherine@play-town.com </td>
<td> 410-219-#### </td>
<td> Resort desk clerk </td>
<td> Play Town </td>
</tr>
<tr>
<td>12</td>
<td>Shaun</td>
<td>Birnbaum</td>
<td>27/02/1987</td>
<td>shaun@caltereo.com</td>
<td>248-304-####</td>
<td>Terrazzo worker</td>
<td> Cal Stereo </td>
</tr>
<tr>
<td>13</td>
<td>Jose</td>
<td>Thorn</td>
<td>04/06/1993</td>
<td> jose@star-interior-design.com </td>
<td> 972-919-#### </td>
<td> Construction engineer </td>
<td> Star Interior Design </td>
</tr>
<tr>
<td>14</td>
<td>Kimberly</td>
<td>Horne</td>
<td>12/04/1997</td>
<td> kimberly@pennfruit.com </td>
<td> 615-483-#### </td>
<td> Children's librarian</td>
<td> Penn Fruit </td>
</tr>
<tr>
<td>15</td>
<td>Mario</td>
<td>Potter</td>
<td>09/12/1996</td>
<td> mario-p@clemensmarkets.com </td>
<td> 615-896-#### </td>
<td> Local controller </td>
<td> Clemens Markets </td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="8" class="bg-white text-center"> <span class="text-danger">*</span>We have used this data for demo purposes only. </td>
</tr>
</tfoot>
</table>
</div>
</div>
</div>
</div>
.cm-scrollbar::-webkit-scrollbar {
width: 8px;
height: 8px;
}
.cm-scrollbar::-webkit-scrollbar-track {
background: #f1f1f1;
}
.cm-scrollbar::-webkit-scrollbar-thumb {
background: #c1c1c1;
}
.cm-scrollbar::-webkit-scrollbar-thumb:hover {
background: #919191;
}
.cm-table-w-scroll {
position: relative;
width: 100%;
z-index: 1;
margin: auto;
overflow: auto;
max-height: 360px;
}
.cm-table-w-scroll table {
width: 100%;
margin: auto;
border-collapse: separate;
border-spacing: 0;
}
.cm-table-w-scroll table th,
.cm-table-w-scroll table td {
font-size: 13px;
padding: 5px 10px;
vertical-align: top;
white-space: nowrap;
}
.cm-table-w-scroll thead th {
background: #007bff; /* set background color for the overcome transparent header cell */
color: #fff;
position: -webkit-sticky; /* for Safari */
position: sticky;
top: 0;
font-weight: 600;
}
.cm-table-w-scroll tfoot,
.cm-table-w-scroll tfoot th,
.cm-table-w-scroll tfoot td {
position: -webkit-sticky; /* for Safari */
position: sticky;
bottom: -1px;
background: #fff; /* set background color for the overcome transparent header cell */
color: #555;
font-size: 11px;
z-index: 4;
box-shadow: 0 0 5px 0 rgba(90, 90, 90, 0.15);
}