Search and install the plugin using the Extension Manager. Refer to Plugins on how to install plugins manually.

This plugin creates a second representation of a table, where all columns are stacked on top of each other, which is only shown for mobile devices. This improves the mobile experience for wide tables as it prevents horizontal scrolling.

In the mobile presentation (specified by your theme's __phone_width__) this:

<mobiletable 1>
^ Name   ^ Color ^ Size  ^ Speed   ^
^ Item 1   | Red   | Small | 50 km/h |
^ Item 2   | Green | Large | 30 km/h |
</mobiletable>

…becomes this:

To activate mobile tables, wrap it in <mobiletable>…</mobiletable> syntax:

<mobiletable>
^ Name   ^ Color ^ Size  ^ Speed   ^
^ Item 1  | Red   | Small | 50 km/h |
^ Item 2  | Green | Large | 30 km/h |
</mobiletable>

This would create a mobile table like this:

You may specify the index (starting with 1) of the column you want to make the main/index column. Using the first example again, your could also make the Color column the main column:

<mobiletable 2>
^ Name   ^ Color ^ Size  ^ Speed   ^
^ Item 1  | Red    | Small | 50 km/h |
^ Item 2  | Green  | Large | 30 km/h |
</mobiletable>

Note that the previous example could also be expressed using the !-syntax for backwards compatibility:

!^ Name   ^! Color ^ Size  ^ Speed   ^
...

However, this syntax is not recommended anymore as it breaks section editing.

• Update plugin.info.txt (2023-04-18 20:17)
• Fix PHP notice (2023-04-18 20:17)
• smarter rowspan fix (2021-08-28 18:49)
• Reset rowspans on every row to prevent index shifting (2021-08-28 18:23)
• Update plugin.info.txt (2021-04-29 13:28)
• Update script.js (2021-04-29 13:26)
• Add class to transformed table (2021-04-29 13:25)
• Add support for SSR or pjax (prevent multiple transformations) (2021-04-29 13:15)