mobiTable jQuery Table Plugin Splash

mobiTable: The jQuery Responsive Table Plugin


mobiTable is a free to use responsive plug-in that rearranges HTML tables into a much easier to navigate format for mobile devices by showing the table rows one touch/click at a time. If you like the plugin, please give me a like on Facebook or a Google+.

  • Multiple Table Support
  • Custom trigger width
  • SVG navigation icons


Resize your browser or try it out on a mobile device to see.

ID Name Address Phone Number Email Occupation
01 David 2221 SW 31st Street, Miami Florida, 33155 555-5633 Stalker
02 Cherry 3212 Coral Street, Cleveland Ohio, 21232 443-2213 Chef
ID Name Address Phone Number Email Occupation
01 John 4311 SW 21st Street, Miami Florida, 33144 305-2112 Mechanic
02 Samantha 4001 NW 63rd Street, New York NY, 774232 335-6643 Attorney
03 Fernado 6433 NW 93rd Street, Orlando Florida, 44321 325-4883 Police Officer
04 Bill 2022 Oakland Street, Los Angelas California, 99321 699-5532 Doctor
05 Mary 2311 Sunbay Ave, Carlton North Carolina, 118653 966-2211 Executive Managment
06 Maria 1123 Collins Avenue, Miami Beach, 32211 305-3476 Pilot


  1. Simply wrap your tables in a div with a unique class name. (see blue colored highlight in "HTML Code" section below)
  2. Add the path to the CSS file for mobiTable.(see velow)
  3. Add a path to the plugin and add the function call code below with the resolution width setting "mobileWidth". This is the less than or equal to tirgger to change to mobiTable. The default is 768 for mobile if you chose not to add this setting. You may change it to whatever works best.

CSS Link

<link href="css/mobiTable.css" rel="stylesheet" type="text/css"/>


<div class='mytable'> 

<table cellpadding='0' cellspacing='0'> 
<th> Heading 1 </th>
<th> Heading 2 </th>
<th> Heading 3 </th>
<td> example 1 </td>
<td> example 2 </td>
<td> example 3 </td>

jQuery Code

<script src='js/mobiTable.min.js'>  </script>
	mobileWidth: 768
	mobileWidth: 768

* Helpful Tips

Plugin Info: