Basic CSS Styling to make a table responsive

Responsive Table CSS

$breakpoint-medium: 768px;

.responsiveTable {
	thead tr {
		position: absolute;
		top: -9999px;
		left: -9999px;

		@media screen and (min-width: $breakpoint-medium) {
			position: static;
		}
	}

	tbody tr {
		display: block;
		margin-top: 1.2em;
		margin-bottom: 1.2em;

		&:nth-child(even) {
			background: #efefef;
		}

		&:hover,
		&:focus {
			background: #ddd;
		}

		@media screen and (min-width: $breakpoint-medium) {
			display: table-row;
		}
	}

	td.responsiveTable__cell {
		border-top: none;
	}
	
	td {
		display: block;

		&::before {
			content: attr(data-header)": ";
			font-weight: bold;

			@media screen and (min-width: $breakpoint-medium) {
				content: normal;
			}
		}

		@media screen and (min-width: $breakpoint-medium) {
			display: table-cell;
		}
	}
}

Responsive Table HTML

<table class="responsiveTable">
	<thead>
		<tr>
			<th>heading1</th>
			<th>heading2</th>
			<th>heading3</th>
			<th>heading4</th>
			<th>heading5</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td class="responsiveTable__cell">Lorem ipsum dolor sit amet.</td>
			<td class="responsiveTable__cell">Ipsa quasi eum dolore! Atque.</td>
			<td class="responsiveTable__cell">Inventore cumque saepe quae consequatur!</td>
			<td class="responsiveTable__cell">Nisi ab, fuga optio magni!</td>
			<td class="responsiveTable__cell">Aspernatur odit, neque facere debitis?</td>
		</tr>
		<tr>
			<td class="responsiveTable__cell">Lorem ipsum dolor sit amet.</td>
			<td class="responsiveTable__cell">Doloribus doloremque, quidem incidunt dolore.</td>
			<td class="responsiveTable__cell">Error, dolor accusantium vel reiciendis.</td>
			<td class="responsiveTable__cell">Perferendis dolores ex vitae quis.</td>
			<td class="responsiveTable__cell">Deleniti amet nulla, ullam iusto.</td>
		</tr>
	</tbody>
</table>