Skip to content

Instantly share code, notes, and snippets.

@steverob

steverob/responsive_tables.html

Created October 8, 2013 10:41
Show Gist options
  • Save steverob/6882838 to your computer and use it in GitHub Desktop.
Save steverob/6882838 to your computer and use it in GitHub Desktop.
Download ZIP
Responsive Tables
Raw
responsive_tables.html
<html>
<head>
<style type="text/css">
@media(max-width: 1024){
.table-responsive th.hidden-1024{
display: none;
}
}
@media(max-width: 800){
.table-responsive th.hidden-800{
display: none;
}
}
@media(max-width: 600){
.table-responsive th.hidden-600{
display: none;
}
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(window).resize(function(){
$.each($('.table-responsive tr th'), function(i){
var index = $(this).index() + 1
if($(this).css("display") == "none" )
$('td:nth-child(' + index.toString() + ')').hide();
else
$('td:nth-child(' + index.toString() + ')').show();
});
});
</script>
</head>
<body>
<h1>Responsive Tables :) </h1>
<table border="1" class='table-responsive'>
<tr>
<th>Important Columns</th>
<th class='hidden-600 '>Average Importance</th>
<th>Important Columns</th>
<th class='hidden-800'>Less Important</th>
<th>Important Columns</th>
<th class='hidden-800'>Less Important</th>
<th>Important Columns</th>
<th class='hidden-1024 test'>Very Less Important</th>
</tr>
<tr>
<td>Data Data Data</td>
<td>Data Data Data</td>
<td>Data Data Data</td>
<td>Data Data Data</td>
<td>Data Data Data</td>
<td>Data Data Data</td>
<td>Data Data Data</td>
<td>Data Data Data</td>
</tr>
<tr>
<td>Data Data Data</td>
<td>Data Data Data</td>
<td>Data Data Data</td>
<td>Data Data Data</td>
<td>Data Data Data</td>
<td>Data Data Data</td>
<td>Data Data Data</td>
<td>Data Data Data</td>
</tr>
<tr>
<td>Data Data Data</td>
<td>Data Data Data</td>
<td>Data Data Data</td>
<td>Data Data Data</td>
<td>Data Data Data</td>
<td>Data Data Data</td>
<td>Data Data Data</td>
<td>Data Data Data</td>
</tr>
<tr>
<td>Data Data Data</td>
<td>Data Data Data</td>
<td>Data Data Data</td>
<td>Data Data Data</td>
<td>Data Data Data</td>
<td>Data Data Data</td>
<td>Data Data Data</td>
<td>Data Data Data</td>
</tr>
<tr>
<td>Data Data Data</td>
<td>Data Data Data</td>
<td>Data Data Data</td>
<td>Data Data Data</td>
<td>Data Data Data</td>
<td>Data Data Data</td>
<td>Data Data Data</td>
<td>Data Data Data</td>
</tr>
<tr>
<td>Data Data Data</td>
<td>Data Data Data</td>
<td>Data Data Data</td>
<td>Data Data Data</td>
<td>Data Data Data</td>
<td>Data Data Data</td>
<td>Data Data Data</td>
<td>Data Data Data</td>
</tr>
<tr>
<td>Data Data Data</td>
<td>Data Data Data</td>
<td>Data Data Data</td>
<td>Data Data Data</td>
<td>Data Data Data</td>
<td>Data Data Data</td>
<td>Data Data Data</td>
<td>Data Data Data</td>
</tr>
<tr>
<td>Data Data Data</td>
<td>Data Data Data</td>
<td>Data Data Data</td>
<td>Data Data Data</td>
<td>Data Data Data</td>
<td>Data Data Data</td>
<td>Data Data Data</td>
<td>Data Data Data</td>
</tr>
<tr>
<td>Data Data Data</td>
<td>Data Data Data</td>
<td>Data Data Data</td>
<td>Data Data Data</td>
<td>Data Data Data</td>
<td>Data Data Data</td>
<td>Data Data Data</td>
<td>Data Data Data</td>
</tr>
</table>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment