Plugins | Responsive Tables

This plugin can be used with the shortcodes in below tab, one of the most important aspects when using this on a page is to initialize the plugin shortcode with the pre shortcode:

[responsive_table_init]

The reason for this is to initialize the javascript which allows the Table Headers to appear as psuedo :before elements. The javascript allows multiple responsive tables per page without the need to hardcode psuedo elements. The pre shortcode lets this happen dynamically. You only need to use the pre shortcode init only once per page no matter how many tables that you use.

For creating my responsive tables when the screen width goes below 600px I hide the table headers and add a label instead inside a pseudo element of a table cell tag. I see a lot of examples online hardcoding these ::before content values in the CSS like in the example below:

    td:nth-of-type(1):before {
      content: "TEAM NAME"; }
    td:nth-of-type(2):before {
      content: "WINS"; }
    td:nth-of-type(3):before {
      content: "LOSSES"; }

 
For this plugin to work you need to have table headers set up as like in the example below:

[responsive_table]

<table>
   <tbody>
     <tr>
         <th>TEAM NAME&lt/th>
         <th>WINS&lt/th>
         <th>LOSSES&lt/th>
      </tr>
      <tr>
         <td>Team A&lt/td>
         <td>26&lt/td>
         <td>1&lt/td>
      </tr>
      <tr>
         <td>Team B&lt/td>
         <td>27&lt/td>
         <td>4&lt/td>
      </tr>
      <tr>
         <td>Team C&lt/td>
         <td>22&lt/td>
         <td>10&lt/td>
      </tr>
   </tbody>
</table>
 [/responsive_table]

 
Each time you use a table on the page you need to wrap each one in the following opening and closing shortcode tags:

[responsive_table][/responsive_table]

To use Responsive Tables on a page you must first use the below shortcode to initialize:

[responsive_table_init]

 
Following this you must wrap each table in the following shortcode:

[responsive_table][/responsive_table]

If you want to use different css styles you can set an ID on the shortcode

[responsive_table id="red-table"]

You can download this plugin in the WordPress directory via Website backend or you can download directly from the plugin page