Skip to content

Instantly share code, notes, and snippets.

@hkirsman
Created June 27, 2012 08:34
Show Gist options
  • Save hkirsman/3002480 to your computer and use it in GitHub Desktop.
Save hkirsman/3002480 to your computer and use it in GitHub Desktop.
turn tables into mobile friendly
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="et">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>table</title>
<style type="text/css">
.odd { background-color: #808080; }
.generated_for_mobile { margin-bottom: 30px }
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Job Title</th>
</tr>
</thead>
<tbody>
<tr>
<td>James</td>
<td>Matman</td>
<td>Chief Sandwich Eater</td>
</tr>
<tr>
<td>The</td>
<td>Tick</td>
<td>Crimefighter Sorta</td>
</tr>
</tbody>
</table>
<table>
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Job Title</th>
<th>Favorite Color</th>
<th>Wars or Trek?</th>
<th>Porn Name</th>
<th>Date of Birth</th>
<th>Dream Vacation City</th>
<th>GPA</th>
<th>Arbitrary Data</th>
</tr>
</thead>
<tbody>
<tr>
<td>James</td>
<td>Matman</td>
<td>Chief Sandwich Eater</td>
<td>Lettuce Green</td>
<td>Trek</td>
<td>Digby Green</td>
<td>January 13, 1979</td>
<td>Gotham City</td>
<td>3.1</td>
<td>RBX-12</td>
</tr>
<tr>
<td>The</td>
<td>Tick</td>
<td>Crimefighter Sorta</td>
<td>Blue</td>
<td>Wars</td>
<td>John Smith</td>
<td>July 19, 1968</td>
<td>Athens</td>
<td>N/A</td>
<td>Edlund, Ben (July 1996).</td>
</tr>
<tr>
<td>Jokey</td>
<td>Smurf</td>
<td>Giving Exploding Presents</td>
<td>Smurflow</td>
<td>Smurf</td>
<td>Smurflane Smurfmutt</td>
<td>Smurfuary Smurfteenth, 1945</td>
<td>New Smurf City</td>
<td>4.Smurf</td>
<td>One</td>
</tr>
<tr>
<td>Cindy</td>
<td>Beyler</td>
<td>Sales Representative</td>
<td>Red</td>
<td>Wars</td>
<td>Lori Quivey</td>
<td>July 5, 1956</td>
<td>Paris</td>
<td>3.4</td>
<td>3451</td>
</tr>
<tr>
<td>Captain</td>
<td>Cool</td>
<td>Tree Crusher</td>
<td>Blue</td>
<td>Wars</td>
<td>Steve 42nd</td>
<td>December 13, 1982</td>
<td>Las Vegas</td>
<td>1.9</td>
<td>Under the couch</td>
</tr>
</tbody>
</table>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
// generate mobile version for each table
$('table').each(function() {
var table = $(this); // cache table object
var head = table.find('thead th');
var rows = table.find('tbody tr').clone(); // appending afterwards does not break original table
// create new table
var newtable = $(
'<table class="generated_for_mobile">' +
' <tbody>' +
' </tbody>' +
'</table>'
);
// cache tbody where we'll be adding data
var newtable_tbody = newtable.find('tbody');
rows.each(function(i) {
var cols = $(this).find('td');
var classname = i % 2 ? 'even' : 'odd';
cols.each(function(k) {
var new_tr = $('<tr class="' + classname + '"></tr>').appendTo(newtable_tbody);
new_tr.append(head.clone().get(k));
new_tr.append($(this));
});
});
$(this).after(newtable);
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment