A Pen by Christopher Crouch.

index.html

<table class="shop_table my_account_orders">

	<thead>
		<tr>
			<th class="order-number"><span class="nobr">Order</span></th>
			<th class="order-date"><span class="nobr">Date</span></th>
			<th class="order-status"><span class="nobr">Status</span></th>
			<th class="order-total"><span class="nobr">Total</span></th>
			<th class="order-actions"><span class="nobr">Actions</span></th>
		</tr>
	</thead>

	<tbody>
		<tr class="order">
			<td class="order-number" data-title="Order">
				<a href="*">#2080</a>
			</td>

			<td class="order-date" data-title="Date">
				<time datetime="2014-06-12" title="1402562157">June 12, 2014</time>
			</td>

			<td class="order-status" data-title="Status">
				On-hold
			</td>

			<td class="order-total" data-title="Total">
				<span class="amount">£176.00</span> for 8 items
			</td>

			<td class="order-actions" data-title="Action">
				<a href="*" class="button view">View</a>
			</td>
		</tr>

		<tr class="order">
			<td class="order-number" data-title="Order">
				<a href="*">#2081</a>
			</td>

			<td class="order-date" data-title="Date">
				<time datetime="2014-06-12" title="1402562157">June 13, 2014</time>
			</td>

			<td class="order-status" data-title="Status">
				On-hold
			</td>

			<td class="order-total" data-title="Total">
				<span class="amount">£75.00</span> for 11 items
			</td>

			<td class="order-actions" data-title="Total">
				<a href="*" class="button view">View</a>
			</td>
		</tr>

		<tr class="order">
			<td class="order-number" data-title="Order">
				<a href="*">#2082</a>
			</td>

			<td class="order-date" data-title="Date">
				<time datetime="2014-06-12" title="1402562157">June 14, 2014</time>
			</td>

			<td class="order-status" data-title="Status">
				On-hold
			</td>

			<td class="order-total" data-title="Total">
				<span class="amount">£65.00</span> for 3 items
			</td>

			<td class="order-actions" data-title="Total">
				<a href="*" class="button view">View</a>
			</td>
		</tr>
	</tbody>
</table>

Responsive-Order-Table.markdown

Responsive Order Table

A Pen by Christopher Crouch on CodePen.

License.

style.css

body {
  font-family: 'Source Sans Pro', times, sans-serif;
}

a {
  color: #28acd7;
  text-decoration: none;
}

.my_account_orders {
  border-collapse: collapse;
  border-spacing: 0;
  max-width: 600px;
  width: 100%;
}

.my_account_orders th {
  text-align: left;
}

tr {
  border-bottom: 1px solid #ccc;
}

th,
td {
  padding: 6px;
}

@media 
only screen and (max-width: 600px) {
  /* Force table to not be like tables anymore */
	table, thead, tbody, th, td, tr { 
		display: block; 
	}
  
  /* Hide table headers (but not display: none;, for accessibility) */
	thead tr { 
		position: absolute;
		top: -9999px;
		left: -9999px;
	}
  
  td { 
		/* Behave  like a "row" */
		border: none;
		border-bottom: 1px solid #eee; 
		position: relative;
		padding-left: 35%; 
	}
  
  td:last-child { 
		 border-width: 0;
	}
  
  td:before { 
     content: attr(data-title);
     color: #ccc;
		/* Now like a table header */
		position: absolute;
		/* Top/left values mimic padding */
		top: 6px;
		left: 6px;
		width: 45%; 
		padding-right: 10px; 
		white-space: nowrap;
	}
}