grim-reapper · August 29, 2015 14:10
diff --git a/mobtable.html b/mobtable.html
 <!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>
	<!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>