danielhq
4/23/2013 - 1:19 PM

Responsive tables with mobile approach

Responsive tables with mobile approach

respnsive-tables.html
content_copyfile_download
<!DOCTYPE html>
<html>
<head>
  <title>test table</title>

	<style>
	.row-head  {
		display:none;
	}
	.cell {
		display:block;
	}
	.row .cell:last-child {
		margin-bottom:20px;
	}
	.cell:before {
		font-weight:bold;
		content:attr(data-label) ": ";
	}
	@media (min-width: 640px) {
		.row, .row-head {
			display:table-row;
		}
		.cell {
			display:table-cell;
		}
		.cell:before {
			content:"";
		}

	}
	</style>
</head>
<body>
<p>Demo <a href="http://codepen.io/danielhq/pen/tIpns">codepen.io</a><br/>
  resize the browser to see the effects
</p>
	<table class="table">
		<tr class="row-head">
			<th class="cell">name</th>
			<th class="cell">Surname</th>
			<th class="cell">Age</th>
		</tr>
		<tr class="row">
			<td class="cell" data-label="name">Jonny</td>
			<td class="cell" data-label="Surname">Combat</td>
			<td class="cell last" data-label="age">23</td>
		</tr>
		<tr class="row">
			<td class="cell" data-label="name">Michael</td>
			<td class="cell" data-label="Surname">Jordan</td>
			<td class="cell last" data-label="age">44</td>
		</tr>
		<tr class="row">
			<td class="cell" data-label="name">Jonny</td>
			<td class="cell" data-label="Surname">Cash</td>
			<td class="cell last" data-label="age">64</td>
		</tr>
	</table>
</body>
</html>