HTML Table responsive - flip Tableheader to first column

html-table-resposive

<style>
@media screen and (max-width: 600px) {
	table.responsive caption { background-image: none; }
	table.responsive thead { display: none; }
	table.responsive tbody td { display: block; padding: .6rem; }
	table.responsive tbody tr td:first-child { background: #333; color: #fff; }
	table.responsive tbody td:before {
		content: attr(data-th); font-weight: bold;
		display: inline-block; width: 6rem;
	}
}
</style>

<script>
$('table.responsive').each(function(){
    	var headers = $( 'thead th',this );

    	$( 'tbody tr',this ).each(function(){
    		$( 'td',this ).each(function(index){
     			$( this ).attr('data-th',$(headers[index]).text());
    		});
    	});
})
</script>