Responsive Tables

responsive-table.css

table#miyazaki { 
	margin: 0 auto;
	border-collapse: collapse;
	font-family: Agenda-Light, sans-serif;
	font-weight: 100; 
	background: #333; color: #fff;
	text-rendering: optimizeLegibility;
	border-radius: 5px; 
}

table#miyazaki caption { 
	font-size: 2rem; color: #444;
	margin: 1rem;
	background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/miyazaki.png), url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/miyazaki2.png);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center left, center right; 
}

table#miyazaki thead th {
	font-weight: 600;
}

table#miyazaki thead th, table#miyazaki tbody td { 
	padding: .8rem; font-size: 1.4rem;
}

table#miyazaki tbody td { 
	padding: .8rem; font-size: 1.4rem;
	color: #444; background: #eee; 
}

table#miyazaki tbody tr:not(:last-child) { 
	border-top: 1px solid #ddd;
	border-bottom: 1px solid #ddd;  
}

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

responsive-table.html

<table id="miyazaki">
	<caption>The Films of Hayao Miyazaki</caption>
	<thead>
		<tr>
			<th>Film</th>
			<th>Year</th>
			<th>Honor</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>My Neighbor Totoro</td>
			<td>1988</td>
			<td>Blue Ribbon Award (Special)</td>
		</tr>
		<tr>
			<td>Princess Mononoke</td>
			<td>1997</td>
			<td>Nebula Award (Best Script)</td>
		</tr>
		<tr>
			<td>Spirited Away</td>
			<td>2001</td>
			<td>Academy Award (Best Animated Feature)</td>
		<tr>
		  <td>Howl’s Moving Castle</td>
		  <td>2004</td>
		  <td>Hollywood Film Festival (Animation OTY)</td>
		</tr>
	</tbody>
</table>

responsive-table.js

var headertext = [];
var headers = document.querySelectorAll("#miyazaki th");
var tablerows = document.querySelectorAll("#miyazaki th");
var tablebody = document.querySelector("#miyazaki tbody");

for(var i = 0; i < headers.length; i++) {
	var current = headers[i];
	headertext.push(current.textContent.replace(/\r?\n|\r/,""));
} 
for (var i = 0, row; row = tablebody.rows[i]; i++) {
	for (var j = 0, col; col = row.cells[j]; j++) {
		col.setAttribute("data-th", headertext[j]);
	} 
}