LiquidFractal Posted November 29, 2020 Share Posted November 29, 2020 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! SeNioR- 1 Link to comment Share on other sites More sharing options...
Alexander V Posted December 11, 2020 Share Posted December 11, 2020 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... SeNioR- and LiquidFractal 2 Link to comment Share on other sites More sharing options...
beats23 Posted June 2, 2022 Share Posted June 2, 2022 I need. this too. Any other solutions? Link to comment Share on other sites More sharing options...
beats23 Posted June 2, 2022 Share Posted June 2, 2022 (edited) 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, 2022 by beats23 LiquidFractal, SeNioR- and Marc Stridgen 3 Link to comment Share on other sites More sharing options...
Marc Stridgen Posted June 2, 2022 Share Posted June 2, 2022 I'll move this to community support, as we wouldnt assist with customisation. But thats a nice find there. Thank you for sharing. LiquidFractal and beats23 2 Link to comment Share on other sites More sharing options...
Sonya* Posted June 2, 2022 Share Posted June 2, 2022 (edited) @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, 2022 by Sonya* LiquidFractal and beats23 1 1 Link to comment Share on other sites More sharing options...
beats23 Posted June 2, 2022 Share Posted June 2, 2022 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 LiquidFractal 1 Link to comment Share on other sites More sharing options...
Recommended Posts