Nikolay Nikolov

<p>Automatically makes the HTML tables in your WordPress posts, pages, and widgets responsive (mobile-friendly). Devices with a small screen will see the tables in a new layout with two columns. In the first column will be the data from the first row (the column names), and in the second column will be the data from the other rows.</p>
<h4>WordPress Plugin Demo</h4>
<p><a href="https://nikolaydev.com/demo-of-make-tables-responsive/" rel="nofollow ugc">https://nikolaydev.com/demo-of-make-tables-responsive/</a></p>
<h4>HTML and CSS Demo for Non-WordPress Sites</h4>
<p><a href="https://nikolaydev.com/make-tables-responsive-html-and-css-example/" rel="nofollow ugc">https://nikolaydev.com/make-tables-responsive-html-and-css-example/</a></p>
<h4>Features</h4>
<ul>
<li>Affect post/page content, excerpts, category descriptions, and text/HTML widgets</li>
<li>Choose affected screen size</li>
<li>Choose the cell background and border color for even and odd rows</li>
<li>Disable for tables by HTML class or ID</li>
<li>Disable or enable only for posts and pages by ID</li>
</ul>
<h4>Pros 🙂</h4>
<ul>
<li>Fully automatic</li>
<li>Does not change the actual post/page content in the database</li>
<li>Easily reverse changes by deactivating the plugin</li>
<li>No jQuery or JavaScript on the front-end</li>
</ul>
<h4>Cons 🙁</h4>
<ul>
<li>The first row must contain the column names</li>
<li>Skips tables with merged cells</li>
<li>Skips posts/pages with tables inside tables</li>
<li>Skips multi-row tables when only some columns use “th” tags</li>
<li>In multi-row tables, HTML code is stripped from the cells with the column names, when displayed in the responsive version (as the left column)</li>
</ul>


Make Tables Responsive


I had the issue on mobile, smaller screens when i use the default Gutenberg table and i install and activated the plugin an it works right away.



Thank you so much.


Add working on Gutenberg in description

Automatically makes the HTML tables in your posts and pages responsive (mobile-friendly).

DBAR Productions

<p>This is a fairly simple plugin that will collapse tables that are too wide for mobile screens into one of three “stacked” views.</p>
<p>The main functionality of this plugin is provided by the jQuery Stacktable plugin from John Polacek, which you can view here:<br />
http://johnpolacek.github.io/stacktable.js/</p>
<p>I take no credit for the jQuery Stacktable plugin. That’s all John!</p>
<p>All this WordPress plugin does is enqueue the Stacktable script on the pages you specify in the settings, and then uses a very small piece of javascript to apply the Stacktable script to ALL tables on the pages you select. You can also disable the built-in sample CSS, so that you can put your own CSS for Stacktable in your theme in order to specify your own mobile breakpoint and any other modifications you wish to make.</p>
<p>Version 1.0.0 adds the ability to use a shortcode on any page to queue up the script. You can specify a type and class attribute, as well as head index and show header attributes.</p>
<p>The “type” attribute can one of the 3 display types: stacktable, cardtable, stackcolumns. Default view is stacktable.</p>
<p>The “class” attribute allows you to specify a class for the wrapper div around the mobile view so you can further tweak the CSS more easily.</p>
<p>The “headindex” attribute allows you to specify the header row index (starting from 0), in case your header row is not the first row of the table.</p>
<p>The “showheader” attribute can have values of “yes” or “no”, with “yes” being the default. This is used to specify if you want to show the headers when using the default stacktable display type (not used for the other 2 display types).</p>
<p>The shortcode to use with default options is simply: <code>[stacktable]</code></p>
<p>Full Shortcode example: <code>[stacktable type="cardtable" class="myClass" headindex="0" showheader="yes"]</code></p>
<p>Note that this plugin will have no effect on tables when the screen width is above the mobile breakpoint specified in the CSS.</p>
<p><strong>Features:</strong></p>
<ul>
<li>Modifies tables to display nicely on mobile devices using the jQuery Stacktable plugin from John Polacek.</li>
<li>Select the specific pages you want the script to be enqueued on. It will be applied to all tables on those pages.</li>
<li>Alternately, in version 1.0.0, you can use the ‘stacktable’ shortcode on any page to queue up the stacktable script on that specific page as well as specify which of the 3 display options you want to use: stacktable (default), cardtable, stackcolumns</li>
<li>Can disable the built-in CSS so that you can queue up your own CSS styles and set your own mobile breakpoint</li>
</ul>
<h3>Additional Info</h3>
<p>The main functionality of this plugin is provided by the jQuery Stacktable plugin from John Polacek, which you can view here:<br />
http://johnpolacek.github.io/stacktable.js/</p>
<p>I created the initial version of this plugin to use for the tables generated by my Volunteer Sign Up Sheets plugin: <a href="https://wordpress.org/plugins/pta-volunteer-sign-up-sheets/" rel="ugc">https://wordpress.org/plugins/pta-volunteer-sign-up-sheets/</a>, but made it generic enough that it could be used for any tables on a WordPress site. For the WordPress.org release I added an admin settings page to allow you to choose the pages the Stacktable script is enqueued on, and to allow you to disable the sample built-in CSS for the mobile view of the tables (as well as the mobile breakpoint).</p>
<p>Since I did NOT have anything to do with the main jQuery Stacktable plugin that provides the majority of the display functionality, I will not be able to provide support for any issues you have with the script.</p>


SSP Stacktable Tables

Reformat wide tables for mobile devices using the jQuery Stacktable plugin from John Polacek.

Make Tables Responsive vs SSP Stacktable Tables