An automated Plone output filter that ensures all tables inside rich text fields are mobile-responsive.
Using plone.outputfilter and BeautifulSoup, this addon automatically parses outgoing HTML content, ensures every <table> has a table class, and wraps them in a scrollable <div class="table-responsive"> container.
Whenever a Plone RichText field is rendered, this addon transparently intercepts the HTML and applies the following DOM transformations:
-
Detects all
<table>tags. -
Injects the
tableCSS class to the table (only if it doesn't already exist, preserving existing classes). -
Wraps the table in a
<div class="table-responsive">element to allow for horizontal scrolling on small screens via CSS.
Original HTML (from TinyMCE):
<table class="listing">
<tr><td>Data</td></tr>
</table>Output (Rendered in browser):
<div class="table-responsive">
<table class="listing table">
<tr><td>Data</td></tr>
</table>
</div>This package registers a custom filter in the plone.outputfilter pipeline. When text is transformed from text/html to text/x-html-safe (or rendered to the browser), the filter intercepts the HTML string, processes it through beautifulsoup4, manipulates the tags, and returns the modified HTML.
Because it operates at the output filter level, it never alters the original data saved in your ZODB. Your editors can continue using tables normally in TinyMCE without worrying about layout-breaking containers.
Install collective.responsivetables with pip:
pip install collective.responsivetablesAnd to create the Plone site:
make create-site- An operating system that runs all the requirements mentioned.
- uv
- Make
- Git
- Docker (optional)
-
Clone this repository, then change your working directory.
git clone git@github.com:collective/collective.responsivetables.git cd collective.responsivetables -
Install this code base.
make install
This package provides markers as strings (<!-- extra stuff goes here -->) that are compatible with plonecli and bobtemplates.plone.
These markers act as hooks to add all kinds of subtemplates, including behaviors, control panels, upgrade steps, or other subtemplates from plonecli.
To run plonecli with configuration to target this package, run the following command.
make add <template_name>For example, you can add a content type to your package with the following command.
make add content_typeYou can add a behavior with the following command.
make add behaviorYou can check the list of available subtemplates in the [`bobtemplates.plone` `README.md` file](https://github.com/plone/bobtemplates.plone/?tab=readme-ov-file#provided-subtemplates).
See also the documentation of [Mockup and Patternslib](https://6.docs.plone.org/classic-ui/mockup.html) for how to build the UI toolkit for Classic UI.
The project is licensed under GPLv2.
Generated using Cookieplone (2.0.0) and cookieplone-templates (db76a81) on 2026-09-23 14:47:25.235378. A special thanks to all contributors and supporters!