LiquidFractal Posted November 29, 2020 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
Alexander V Posted December 11, 2020 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... LiquidFractal and SeNioR- 2
beats23 Posted June 2, 2022 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 Marc, SeNioR- and LiquidFractal 3
Marc Posted June 2, 2022 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. beats23 and LiquidFractal 2
Sonya* Posted June 2, 2022 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
beats23 Posted June 2, 2022 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
Recommended Posts