Hello,

I was wondering if anyone had any tips for creating responsive tables in CKEditor?  I'm using the Tables addons to create some FAQs using @HeadStand's wonderful FAQ app, including a simple 2col X 3-4row table.  Works great for anything except the smallest (smartphone) display, and even then it's great if you turn your phone on its side but in default view there's text spilling out of the site area.

Anyone had experience coding responsive elements in CKEditor who might have some insights about creating simple tables which will display on a default vertical smartphone screen?

Thanks!

I looked into this myself before.

 

There is a pretty awesome ckeditor plugin to make tables more powerful (and beautiful), I'm not sure if it does responsiveness as well, but unfortunately it doesn't work with IPS as doesn't support a required CKEditor plugin. 

Perhaps allowing HTML posting by yourself and just using code is the better solution? Different path, but that's what I think i'll be doing. Not sure if Headstand's plugin supports that...

I need. this too. Any other solutions?

I found a great solution for my needs. I post it here as this maybe useful for others. I found this online HTML table creator. Design the tables online then copy and paste the code via the Ckeditor admin source button.  Online HTML table creator

 

Edited June 2, 20222 yr by beats23

I'll move this to community support, as we wouldnt assist with customisation. But thats a nice find there. Thank you for sharing.

@beats23, be aware that this code contains hard-coded background and text color. This *can* lead to issues with light/dark mode. I would go with native ipsTable class and CKEditor plugin for tables.

Add and edit a table via plugin in your editor and use class="ipsTable ipsTable_responsive ipsTable_zebra"

Edited June 2, 20222 yr by Sonya*

6 hours ago, Sonya* said:

@beats23, be aware that this code contains hard-coded background and text color. This *can* lead to issues with light/dark mode. I would go with native ipsTable class and CKEditor plugin for tables.

Add and edit a table via plugin in your editor and use class="ipsTable ipsTable_responsive ipsTable_zebra"

Nice one. Thanks