Magic Liquidizer Responsive Table (only needed if you have HTML tables in your site) is a simple and lightweight plugin that makes HTML tables automatically become responsive for smaller devices by collapsing columns into rows.
More Info
https://wordpress.org/plugins/magic-liquidizer-responsive-table/
Initial Configuration
Magic Liquidizer Lite > Table
Default settings work well. You can change the breakpoint pixel width when columns collapse, if you prefer.
Usage
If you also installed Advanced Editor Tools (previously TinyMCE Advanced), the following instructions show you how to create a responsive table. Without Advanced Editor Tools plugin, you will need to code the table manually.
- While editing a page/post, place your cursor where you want to insert the table and click the Insert table button. Then choose the number of rows and columns you need.
- Do not resize the table by dragging an edge or it will add a fixed width (which we don’t want) and lose its responsive nature.
NOTE: Anytime you accidentally resize the table, click the Insert table button, choose Table properties, and enter 100% for Width, then click OK. - Enter content inside the cells. It may be hard to move between empty cells without accidentally resizing the table so use your keyboard arrows to navigate from cell to cell.
- You can add background colors by selecting a row. Then click the Insert table button, choose Row > Table row properties, and on the popup window, click the Advanced tab and choose new colors. If your site has been coded to automatically add background colors to rows, we discourage overriding those colors unless absolutely necessary, to keep styling consistent and professional throughout the site.
- You can also merge, split, copy & paste cells, rows and columns using the Insert table button options.
Contact us if you need help with your website’s layout.
