RWD Table

Number	Date	Shipping Address	Total	Status	View
3412	January 10, 2021	123 Main Street, Toronto, M2R 3V1, ON	$150	New Order
3411	February 2, 2021	1234 Main Street, Toronto, M2R 3V8, ON	$250	Shipping

Example

PHP

<table class="rwd_table">
	<thead>
	<tr>
		<th scope="col">Number</th>
		<th scope="col">Date</th>
		<th scope="col">Shipping Address</th>
		<th scope="col">Total</th>
		<th scope="col">Status</th>
		<th scope="col">View</th>
	</tr>
	</thead>
	<tbody>
	<tr>
		<td data-label="Number:">3412</td>
		<td data-label="Date:">January 10, 2021</td>
		<td data-label="Shipping Address:">123 Main Street, Toronto, M2R 3V1, ON</td>
		<td data-label="Total:">$150</td>
		<td data-label="Status:">New Order</td>
		<td data-label="View:">
			<a href="#" target="_blank">
				<?= svg('iconEye', 'view_order')?>
			</a>
		</td>
	</tr>
	<tr>
		<td data-label="Number:">3411</td>
		<td data-label="Date:">February 2, 2021</td>
		<td data-label="Shipping Address:">1234 Main Street, Toronto, M2R 3V8, ON</td>
		<td data-label="Total:">$250</td>
		<td data-label="Status:">Shipping</td>
		<td data-label="View:">
			<a href="#" target="_blank">
				<?= svg('iconEye', 'view_order')?>
			</a>
		</td>
	</tr>
	</tbody>
</table>

CSS

.rwd_table{margin:0;padding:0;width:100%;table-layout:fixed}
.rwd_table tr{border-bottom:.1rem solid #cecece}
.rwd_table th,.rwd_table td{padding:1.3rem 1rem 1rem;text-align:center}
.rwd_table th{font-size:1.4rem;letter-spacing:.1rem;text-transform:uppercase}
.rwd_table td{font-size:1.4rem}
.rwd_table a .view_order{-webkit-transition:.3s linear;-o-transition:.3s linear;-moz-transition:.3s linear;transition:.3s linear}

@media (-ms-high-contrast: none),(-ms-high-contrast: active),(-moz-touch-enabled: 0),(hover: hover) {
	.rwd_table a:hover .view_order{color:#09a5be}
}

@media only screen and (max-width: 640px) {
	.rwd_table{border:none}
	.rwd_table thead{display:none}
	.rwd_table tr{display:block;padding:0;background-color:#fff}
	.rwd_table tr:nth-of-type(odd){background-color:#ecf0f1}
	.rwd_table td{border-bottom:.1rem solid #cecece;display:block;min-height:4.1rem;font-size:1.4rem;text-align:left;position:relative;padding:1.1rem 1.2rem 1rem 50%}
	.rwd_table td::before{content:attr(data-label) " ";position:absolute;top:1.1rem;left:1.2rem;width:45%;display:inline-block;padding:0 1rem 0 0;font-size:1.4rem;font-weight:700;color:#000;text-align:left}
	.rwd_table td:last-child{border-bottom:none}
}

SCSS

/* Vars */
$main:     #09a5be;

.rwd_table {
	margin: 0;
	padding: 0;
	width: 100%;
	table-layout: fixed;
	
	tr {
		border-bottom: .1rem solid #cecece;
	}
	
	th, td {
		padding: 1.3rem 1rem 1rem;
		text-align: center;
	}
	
	th {
		font-size: 1.4rem;
		letter-spacing: .1rem;
		text-transform: uppercase;
	}
	
	td {
		font-size: 1.4rem;
	}
	
	a .view_order {
		transition: .3s linear;
	}
}

@media (-ms-high-contrast: none), (-ms-high-contrast: active), (-moz-touch-enabled: 0), (hover: hover) {
	.rwd_table a:hover .view_order {
		color: $main;
	}
}

@media only screen and (max-width: 640px) {
	.rwd_table {
		border: none;
		
		thead {
			display: none;
		}
		
		tr {
			display: block;
			padding: 0;
			background-color: #ffffff;
			
			&:nth-of-type(odd) {
				background-color: #ecf0f1;
			}
		}
		
		td {
			border-bottom: .1rem solid #cecece;
			display: block;
			min-height: 4.1rem;
			font-size: 1.4rem;
			text-align: left;
			position: relative;
			padding: 1.1rem 1.2rem 1rem 50%;
			
			&::before {
				content: attr(data-label) " ";
				position: absolute;
				top: 1.1rem;
				left: 1.2rem;
				width: 45%;
				display: inline-block;
				padding: 0 1rem 0 0;
				font-size: 1.4rem;
				font-weight: 700;
				color: #000000;
				text-align: left;
			}
			
			&:last-child {
				border-bottom: none;
			}
		}
	}
}