Responsive Data Tables

<table>
	<thead>
	<tr>
		<th>First Name</th>
		<th>Last Name</th>
	</tr>
	</thead>
	<tbody>
	<tr>
		<td data-label='First Name'>James</td>
		<td data-label='First Name'>Matman</td>
	</tr>
	<tr>
		<td data-label='Last Name'>Smith</td>
		<td data-label='Last Name'>Ford</td>
	</tr>
	</tbody>
</table>
table,thead,tbody,th,td,tr{display:block}
thead,th{display:none}
td {border:none;border-bottom:1px solid #eee;position:relative;padding-left:50%}
td:before {position:absolute;top:6px;left:6px;width:45%;padding-right:10px;white-space:nowrap}
td:before {content:attr(data-label)/* Use data attributes, content stays in HTML not in CSS */