Generate Mobile Version of Table

Developer
Chris Coyier
Size
3,077 Kb
Views
12,144
  1. Generate Mobile Version of Table Previews
  2. Generate Mobile Version of Table HTML Codes
  3. Generate Mobile Version of Table CSS Codes
  4. Generate Mobile Version of Table JS Codes

How do I make an generate mobile version of table?

Based on gist: https://gist.github.com/3002480By Hannes Kirsman. What is a generate mobile version of table? How do you make a generate mobile version of table? This script and codes were developed by Chris Coyier on 08 January 2023, Sunday.

Generate Mobile Version of Table Previews
IQ Test

Generate Mobile Version of Table - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Generate Mobile Version of Table</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ table { margin: 50px;
}
table td, table th { padding: 10px; text-align: left;
}
.desktop tbody tr:nth-child(odd) { background: #eee;
}
.generated_for_mobile tr.odd { background: #eee;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <table class="desktop"> <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 class="desktop"> <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 src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Generate Mobile Version of Table - Script Codes CSS Codes

table { margin: 50px;
}
table td, table th { padding: 10px; text-align: left;
}
.desktop tbody tr:nth-child(odd) { background: #eee;
}
.generated_for_mobile tr.odd { background: #eee;
}

Generate Mobile Version of Table - Script Codes JS Codes

$('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);
});
Generate Mobile Version of Table - Script Codes
Generate Mobile Version of Table - Script Codes
Home Page Home
Developer Chris Coyier
Username chriscoyier
Uploaded January 08, 2023
Rating 3
Size 3,077 Kb
Views 12,144
Do you need developer help for Generate Mobile Version of Table?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Chris Coyier (chriscoyier) Script Codes
Name
Simple Flexbox Responsive Nav
Row and Column Highlighting with CSS Only
Filtered Search RWD Pattern
Pull Quote from NY Post
Simple Responsive Form
Infinite Slideshow
Bookmarklet to make the text between 45 and 75 characters turn red.
Scroll Drawing
Slide in from bottom boxes
Complex Text Shadow Examples
Create amazing captions with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!