<div class="p-5">
	<div class="pb-4 px-0 px-lg-4 row">
		<div class="col-12">
			<h2 class="text-primary">Modern 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 data-title="#">1</td>
							<td data-title="First Name">Joseph</td>
							<td data-title="Last Name">Thompson</td>
							<td data-title="Date of Birth">20/09/1983</td>
							<td data-title="Email"> joseph@gmail.com </td>
							<td data-title="Phone"> 815-398-#### </td>
							<td data-title="Occupation"> Foundry mold and coremaker </td>
							<td data-title="Company"> Desert Garden Help </td>
						</tr>
						<tr>
							<td data-title="#">2</td>
							<td data-title="First Name">Lynn</td>
							<td data-title="Last Name">Rodman</td>
							<td data-title="Date of Birth">20/09/1988</td>
							<td data-title="Email"> lynn.rodman@dayrep.com </td>
							<td data-title="Phone"> 972-763-#### </td>
							<td data-title="Occupation"> Geotechnical engineer </td>
							<td data-title="Company"> New World Realty </td>
						</tr>
						<tr>
							<td data-title="#">3</td>
							<td data-title="First Name">Monica</td>
							<td data-title="Last Name">Yocum</td>
							<td data-title="Date of Birth">18/03/1964</td>
							<td data-title="Email"> contact@monica.com </td>
							<td data-title="Phone"> 586-350-#### </td>
							<td data-title="Occupation"> Assistant editor </td>
							<td data-title="Company"> Happy Family </td>
						</tr>
						<tr>
							<td data-title="#">4</td>
							<td data-title="First Name">Brett</td>
							<td data-title="Last Name">Garcia</td>
							<td data-title="Date of Birth">20/09/1997</td>
							<td data-title="Email"> brett.garcia@sambos.com </td>
							<td data-title="Phone"> 574-735-#### </td>
							<td data-title="Occupation"> Polisher </td>
							<td data-title="Company"> Sambo's </td>
						</tr>
						<tr>
							<td data-title="#">5</td>
							<td data-title="First Name">Billy</td>
							<td data-title="Last Name">Mitcham</td>
							<td data-title="Date of Birth">10/05/1994</td>
							<td data-title="Email"> billy.mitcham@teleworm.us</td>
							<td data-title="Phone"> 818-723-#### </td>
							<td data-title="Occupation"> Product designer </td>
							<td data-title="Company"> Audio Visions </td>
						</tr>
						<tr>
							<td data-title="#">6</td>
							<td data-title="First Name">Thomas</td>
							<td data-title="Last Name">Duerr</td>
							<td data-title="Date of Birth">20/09/1997</td>
							<td data-title="Email"> thomas-duerr@jourrapide.com</td>
							<td data-title="Phone"> 715-578-#### </td>
							<td data-title="Occupation">Service technician</td>
							<td data-title="Company">Destiny Realty</td>
						</tr>
						<tr>
							<td data-title="#">7</td>
							<td data-title="First Name">Patricia</td>
							<td data-title="Last Name">McCranie</td>
							<td data-title="Date of Birth">30/11/1999</td>
							<td data-title="Email"> patricia239@mccranie.com </td>
							<td data-title="Phone">440-266-####</td>
							<td data-title="Occupation">Risk manager</td>
							<td data-title="Company">Herman's World</td>
						</tr>
						<tr>
							<td data-title="#">8</td>
							<td data-title="First Name">James</td>
							<td data-title="Last Name"> Wood</td>
							<td data-title="Date of Birth">15/08/1996</td>
							<td data-title="Email"> james-wood@shareorbuy.com </td>
							<td data-title="Phone"> 574-735-#### </td>
							<td data-title="Occupation"> Power tool repairer </td>
							<td data-title="Company"> Shareor Buy </td>
						</tr>
						<tr>
							<td data-title="#">9</td>
							<td data-title="First Name">Sidney</td>
							<td data-title="Last Name">Cannon</td>
							<td data-title="Date of Birth">05/07/1988</td>
							<td data-title="Email"> s-cannon@alp.com </td>
							<td data-title="Phone"> 615-424-#### </td>
							<td data-title="Occupation"> Pesticide sprayer </td>
							<td data-title="Company"> A. L. Price </td>
						</tr>
						<tr>
							<td data-title="#">10</td>
							<td data-title="First Name">Michele </td>
							<td data-title="Last Name">McNichols</td>
							<td data-title="Date of Birth">13/05/1994</td>
							<td data-title="Email"> michele@record-town.com </td>
							<td data-title="Phone"> 615-896-#### </td>
							<td data-title="Occupation"> Otorhinolaryngology nurse </td>
							<td data-title="Company"> Record Town </td>
						</tr>
						<tr>
							<td data-title="#">11</td>
							<td data-title="First Name">Catherine</td>
							<td data-title="Last Name">Glaser</td>
							<td data-title="Date of Birth">31/03/1995</td>
							<td data-title="Email"> catherine@play-town.com </td>
							<td data-title="Phone"> 410-219-#### </td>
							<td data-title="Occupation"> Resort desk clerk </td>
							<td data-title="Company"> Play Town </td>
						</tr>
						<tr>
							<td data-title="#">12</td>
							<td data-title="First Name">Shaun</td>
							<td data-title="Last Name">Birnbaum</td>
							<td data-title="Date of Birth">27/02/1987</td>
							<td data-title="Email">shaun@caltereo.com</td>
							<td data-title="Phone">248-304-####</td>
							<td data-title="Occupation">Terrazzo worker</td>
							<td data-title="Company"> Cal Stereo </td>
						</tr>
						<tr>
							<td data-title="#">13</td>
							<td data-title="First Name">Jose</td>
							<td data-title="Last Name">Thorn</td>
							<td data-title="Date of Birth">04/06/1993</td>
							<td data-title="Email"> jose@star-interior-design.com </td>
							<td data-title="Phone"> 972-919-#### </td>
							<td data-title="Occupation"> Construction engineer </td>
							<td data-title="Company"> Star Interior Design </td>
						</tr>
						<tr>
							<td data-title="#">14</td>
							<td data-title="First Name">Kimberly</td>
							<td data-title="Last Name">Horne</td>
							<td data-title="Date of Birth">12/04/1997</td>
							<td data-title="Email"> kimberly@pennfruit.com </td>
							<td data-title="Phone"> 615-483-#### </td>
							<td data-title="Occupation"> Children's librarian</td>
							<td data-title="Company"> Penn Fruit </td>
						</tr>
						<tr>
							<td data-title="#">15</td>
							<td data-title="First Name">Mario</td>
							<td data-title="Last Name">Potter</td>
							<td data-title="Date of Birth">09/12/1996</td>
							<td data-title="Email"> mario-p@clemensmarkets.com </td>
							<td data-title="Phone"> 615-896-#### </td>
							<td data-title="Occupation"> Local controller </td>
							<td data-title="Company"> 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);
}

@media screen and (max-width:767px) {
    .cm-table-w-scroll table thead, .cm-table-w-scroll table tfoot {
        display: none;
    }

    .cm-table-w-scroll table tbody tr {
        display: block;
        margin: 10px 15px 20px;
        box-shadow: 0 0 5px 0 rgba(90, 90, 90, 0.5);
        border-radius: 4px;
    }

    .cm-table-w-scroll table tbody tr td[data-title]:before {
        content: attr(data-title);
        font-size: 13px;
        padding-right: 10px;
        font-weight: 500;
    }
  
    .cm-table-w-scroll table tbody tr td {
        display: flex;
        justify-content: space-between;
        white-space: normal;
        text-align: end;
    }

    .cm-table-w-scroll table tbody tr td:not(:last-child) {
        border-bottom: 1px solid rgb(204 204 204 / 32%) !important; /* !important to overcome bootstrap css */
    }
    
    .cm-table-w-scroll table th, .cm-table-w-scroll table td {
        padding: 10px;
    }

    .cm-table-w-scroll table thead tr th, .cm-table-w-scroll table tbody tr td {
        border-width: 0px;
        box-shadow: none;
    }
}

External CSS

  1. https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css

External JavaScript

  1. https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js