Hi Ivan,
Thanks for your question and sorry for the delay in getting back to you.
First create the WordPress page (or post) you want your table to appear in.
Then you can create a new Code Block, call it something like Responsive Tables – JS, and add the code like this:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="https://ghepting.github.io/jquery-responsive-tables/jquery-responsiveTables.js"></script>
<script type="text/javascript" src="https://ghepting.github.io/jquery-responsive-tables/jquery.responsiveText.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.responsive').not('table').responsiveText();
$('table.responsive').responsiveTables();
});
</script>
This code block will be automatically added to the Header of the page via the Assignment Panel. To do this, go to the Assignment Panel section for the Responsive Tables – JS code block and select the Page (or Post) tab, and tick the title of the WordPress page/post you created earlier. You may need to refresh CJT if you do not see it in there, but make sure you Save your code block beforehand.
Next:
Create another CJT Code Block and call it Responsive Tables – HTML and add your HTML table code in there:
<table class="responsive" data-min="11" data-max="30" cellpadding="0" cellspacing="0">
<thead>
<tr>
<th valign="middle">2013</th>
<th valign="middle">Internet Explorer</th>
<th valign="middle">Firefox</th>
<th valign="middle">Chrome</th>
<th valign="middle">Safari</th>
<th valign="middle">Opera</th>
</tr>
</thead>
<tbody>
<tr>
<th valign="middle">May</th>
<td valign="middle">12.6 %</td>
<td valign="middle">27.7 %</td>
<td valign="middle">52.9 %</td>
<td valign="middle">4.0 %</td>
<td valign="middle">1.6 %</td>
</tr>
<tr>
<th valign="middle">April</th>
<td valign="middle">12.7 %</td>
<td valign="middle">27.9 %</td>
<td valign="middle">52.7 %</td>
<td valign="middle">4.0 %</td>
<td valign="middle">1.7 %</td>
</tr>
<tr>
<th valign="middle">March</th>
<td valign="middle">13.0 %</td>
<td valign="middle">28.5 %</td>
<td valign="middle">51.7 %</td>
<td valign="middle">4.1 %</td>
<td valign="middle">1.8 %</td>
</tr>
<tr>
<th valign="middle">February</th>
<td valign="middle">13.5 %</td>
<td valign="middle">29.6 %</td>
<td valign="middle">50.0 %</td>
<td valign="middle">4.1 %</td>
<td valign="middle">1.8 %</td>
</tr>
<tr>
<th valign="middle">January</th>
<td valign="middle">14.3 %</td>
<td valign="middle">30.2 %</td>
<td valign="middle">48.4 %</td>
<td valign="middle">4.2 %</td>
<td valign="middle">1.9 %</td>
</tr>
</tbody>
</table>
You will be adding this HTML code block via a CJT shortcode.
To do this, go to the WordPress page (or post) for your table and make sure you are in the Visual editor (not Text). Click the CJT shortcode embedder button (Tiny MCE button) and add the Responsive Tables – HTML to the editor.
Alternatively you can simply type this shortcode instead: [cjtoolbox name=’Responsive Tables – HTML’]
Update your page and it should work.
Kind Regards,
Damian
