Skip to Content

A frequent trouble I come up against when working on websites is figuring out how to make data-rich tables collapse elegantly. So far, to my knowledge, there have not yet been many (if any) good solutions to this problem.

Generally, two approaches are taken: either the table is wrapped in a div that scrolls when it gets narrower than the table or table columns disappear as the device width shrinks. I am not crazy over either of these.

Here is what I have come up with.

(Resize the browser window to see what happens to the table.)

License # License Holder Variant Status Expire Date Modified
1-1234-5678-HASH Doe, John EBL Active November 17, 2013 November 27, 2013
2-1234-5678-HASH Doe, John EBL Active November 17, 2013 November 27, 2013
3-1234-5678-HASH Doe, John EBL Active November 17, 2013 November 27, 2013
4-1234-5678-HASH Doe, John EBL Active November 17, 2013 November 27, 2013
5-1234-5678-HASH Doe, John EBL Active November 17, 2013 November 27, 2013
6-1234-5678-HASH Doe, John EBL Active November 17, 2013 November 27, 2013
7-1234-5678-HASH Doe, John EBL Active November 17, 2013 November 27, 2013
8-1234-5678-HASH Doe, John EBL Active November 17, 2013 November 27, 2013
9-1234-5678-HASH Doe, John EBL Active November 17, 2013 November 27, 2013
10-1234-5678-HASH Doe, John EBL Active November 17, 2013 November 27, 2013
11-1234-5678-HASH Doe, John EBL Active November 17, 2013 November 27, 2013
12-1234-5678-HASH Doe, John EBL Active November 17, 2013 November 27, 2013
13-1234-5678-HASH Doe, John EBL Active November 17, 2013 November 27, 2013
14-1234-5678-HASH Doe, John EBL Active November 17, 2013 November 27, 2013
15-1234-5678-HASH Doe, John EBL Active November 17, 2013 November 27, 2013

HTML

<table id="test_table" cellpadding="0" cellspacing="0" border="0">
	<thead>
		<tr>
			<th>License #</th>
			<th>License Holder</th>
			<th>Variant</th>
			<th>Status</th>
			<th>Expire Date</th>
			<th>Modified</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td><a href="#">1-1234-5678-HASH</a></td>
			<td>Doe, John</td>
			<td>EBL</td>
			<td>Active</td>
			<td>November 17, 2013</td>
			<td>November 27, 2013</td>
		</tr>
		<tr>
			<td><a href="#">2-1234-5678-HASH</a></td>
			<td>Doe, John</td>
			<td>EBL</td>
			<td>Active</td>
			<td>November 17, 2013</td>
			<td>November 27, 2013</td>
		</tr>
		<tr>
			<td><a href="#">3-1234-5678-HASH</a></td>
			<td>Doe, John</td>
			<td>EBL</td>
			<td>Active</td>
			<td>November 17, 2013</td>
			<td>November 27, 2013</td>
		</tr>
		<tr>
			<td><a href="#">4-1234-5678-HASH</a></td>
			<td>Doe, John</td>
			<td>EBL</td>
			<td>Active</td>
			<td>November 17, 2013</td>
			<td>November 27, 2013</td>
		</tr>
		<tr>
			<td><a href="#">5-1234-5678-HASH</a></td>
			<td>Doe, John</td>
			<td>EBL</td>
			<td>Active</td>
			<td>November 17, 2013</td>
			<td>November 27, 2013</td>
		</tr>
		<tr>
			<td><a href="#">6-1234-5678-HASH</a></td>
			<td>Doe, John</td>
			<td>EBL</td>
			<td>Active</td>
			<td>November 17, 2013</td>
			<td>November 27, 2013</td>
		</tr>
		<tr>
			<td><a href="#">7-1234-5678-HASH</a></td>
			<td>Doe, John</td>
			<td>EBL</td>
			<td>Active</td>
			<td>November 17, 2013</td>
			<td>November 27, 2013</td>
		</tr>
		<tr>
			<td><a href="#">8-1234-5678-HASH</a></td>
			<td>Doe, John</td>
			<td>EBL</td>
			<td>Active</td>
			<td>November 17, 2013</td>
			<td>November 27, 2013</td>
		</tr>
		<tr>
			<td><a href="#">9-1234-5678-HASH</a></td>
			<td>Doe, John</td>
			<td>EBL</td>
			<td>Active</td>
			<td>November 17, 2013</td>
			<td>November 27, 2013</td>
		</tr>
		<tr>
			<td><a href="#">10-1234-5678-HASH</a></td>
			<td>Doe, John</td>
			<td>EBL</td>
			<td>Active</td>
			<td>November 17, 2013</td>
			<td>November 27, 2013</td>
		</tr>
		<tr>
			<td><a href="#">11-1234-5678-HASH</a></td>
			<td>Doe, John</td>
			<td>EBL</td>
			<td>Active</td>
			<td>November 17, 2013</td>
			<td>November 27, 2013</td>
		</tr>
		<tr>
			<td><a href="#">12-1234-5678-HASH</a></td>
			<td>Doe, John</td>
			<td>EBL</td>
			<td>Active</td>
			<td>November 17, 2013</td>
			<td>November 27, 2013</td>
		</tr>
		<tr>
			<td><a href="#">13-1234-5678-HASH</a></td>
			<td>Doe, John</td>
			<td>EBL</td>
			<td>Active</td>
			<td>November 17, 2013</td>
			<td>November 27, 2013</td>
		</tr>
		<tr>
			<td><a href="#">14-1234-5678-HASH</a></td>
			<td>Doe, John</td>
			<td>EBL</td>
			<td>Active</td>
			<td>November 17, 2013</td>
			<td>November 27, 2013</td>
		</tr>
		<tr>
			<td><a href="#">15-1234-5678-HASH</a></td>
			<td>Doe, John</td>
			<td>EBL</td>
			<td>Active</td>
			<td>November 17, 2013</td>
			<td>November 27, 2013</td>
		</tr>
	</tbody>
</table>

CSS

table {
	width:100%;
}
table tr td,
table tr th {
	padding:.5em 0 .2em;
}
table tr th {
	text-align:left;
	border-bottom:1px solid #ccc;
}
table tr td {
	border-bottom:1px solid #ddd;
}
table tr:nth-child(2n+1) td {
	background-color:#f5f5f5;
}
table tr:hover td {
	background-color:#e6f2ff;
}

table tr td .label {
	display:none;
}
@media (max-width:640px) {
	table,tbody,tr,td {
		display:block;
	}
	table th {
		display:none;
	}
	table tr {
		padding-bottom:1em;
		border-top:2px solid #bbb;
	}
	table tr td .label {
		display:inline;
		font-weight:700;
		padding-right:.5em;
	}
}

Javascript

jQuery(function(){
	jQuery('table').find('th').each(function(index){
		var label = '' + jQuery(this).text() + ':';
		var n = index + 1;
		jQuery(this).closest('table').find('tr td:nth-child('+n+')').prepend(label);
	});
});