Instructions
- Simply wrap your tables in a div with a unique class name. (see blue colored highlight in "HTML Code" section below)
- Add the path to the CSS file for mobiTable.(see velow)
- 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
- Add a custom hex color for your navigation UI arrows
CSS Link
<link href="css/mobiTable.css" rel="stylesheet" type="text/css"/>
HTML Code
<div class='mytable'>
<table cellpadding='0' cellspacing='0'>
<tbody>
<tr>
<th> Heading 1 </th>
<th> Heading 2 </th>
<th> Heading 3 </th>
</tr>
<tr>
<td> example 1 </td>
<td> example 2 </td>
<td> example 3 </td>
</tr>
</tbody>
</table>
</div>
jQuery Code
<script src='js/mobiTable.min.js'> </script>
<script>
$('.mytable').mobiTable({
mobileWidth: 768,
navColor:'#39b39b'
});
$('.mytable2').mobiTable({
mobileWidth: 768,
navColor:'red'
});
</script>
* Helpful Tips
- Your tables need to have "< th >" headings in order for this to work. See "HTML Code" above for yellow colored highlight.
- This will only work with raw-data tables, meaning no html code like image tags or formating within. Use CSS parent and sibling selectors to format. You can even add specifc class names to your table rows and columns for more formating.
Plugin Info:
- Version: 0.2 - Added embeded SVG nav icons, increased nav size
- Pluign Type: jQuery
- Last Update: 01/22/2017
- License: GNU 2
- File Size: minified @ 2KB
- jQuery 3.0.0 compatible
- Author: Mark Hawkins - www.markhawkinsdesigns.com
