An automated Plone output filter that ensures all tables inside rich text fields are mobile-responsive.

Features

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.

Features

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 table CSS 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.

Example Transformation

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>

How it works

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.

Installation

Install collective.responsivetables with pip:

pip install collective.responsivetables

And to create the Plone site:

make create-site

Contribute

• Issue tracker
• Source code

Prerequisites ✅

• An operating system that runs all the requirements mentioned.
• uv
• Make
• Git
• Docker (optional)

Installation 🔧

1. Clone this repository, then change your working directory.

   git clone git@github.com:collective/collective.responsivetables.git
   cd collective.responsivetables
   

2. Install this code base.

   make install
   

Add features using plonecli or bobtemplates.plone

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_type

You can add a behavior with the following command.

make add behavior

You 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.

License

The project is licensed under GPLv2.

Credits and acknowledgements 🙏

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!

Changelog

1.0.0b1 (2026-09-23)

Tests

• Add unit and integration tests for the responsive tables filter and make it idempotent so already-wrapped tables are not wrapped again. #1