Responsive Table that convers Table Columns to Rows along with Labels

ResponsiveLightningDataTable.css

/* RESPONSIVE LIGHTNING DATATABLE - SALESFORCE (With Checkbox)
 * https://developer.salesforce.com/docs/component-library/bundle/lightning-datatable/example
 */
@media (max-width: 768px) {
	.THIS lightning-datatable.responsive-table thead th:not(:first-child) {
		display: none;
	}

	.THIS lightning-datatable.responsive-table thead th:first-child .slds-checkbox:after {
		content: 'Select All';
		padding-left: 0.5rem;
	}

	.THIS lightning-datatable.responsive-table thead th:first-child .slds-checkbox {
		display: inline-flex;
	}

	.THIS lightning-datatable.responsive-table tbody td,
	.THIS lightning-datatable.responsive-table tbody th {
		display: block;
		border-top: 0;
	}

	.THIS lightning-datatable.responsive-table tr {
		border-bottom: 1px solid #dee2e6;
	}

	.THIS lightning-datatable.responsive-table tbody td:not(:first-child):before,
	.THIS lightning-datatable.responsive-table tbody th:before {
		content: attr(data-label) ':';
		font-weight: bold;
		display: inline-block;
		margin-right: 5px;
	}
}

ResponsiveTable.css

/* Responsive Table Start - Collapse by row */
.responsive-table td,
.responsive-table th {
    border-top: 1px solid #dee2e6;
    white-space: normal;
}

@media (max-width: 480px) {
    .responsive-table thead {
        display: none;
    }

    .responsive-table td {
        display: block;
        border-top: 0;
    }

    .responsive-table tr {
        border-bottom: 1px solid #dee2e6;
    }

    .responsive-table td:before {
        content: attr(data-label) ':';
        font-weight: bold;
        display: inline-block;
        margin-right: 5px;
    }
}
/* Responsive Table End */

/* 
 * <table class="responsive-table">
 *     <thead>
 *         <tr>
 *             <th></th>
 *             <th></th>
 *             <th></th>
 *         </tr>
 *     </thead>
 *     <tbody>
 *         <tr>
 *             <td data-label=""></td>
 *             <td data-label=""></td>
 *             <td data-label=""></td>
 *         </tr>
 *         <tr>
 *             <td data-label=""></td>
 *             <td data-label=""></td>
 *             <td data-label=""></td>
 *         </tr>
 *     </tbody>
 * </table>
 */