Doesn’t Work with Gutenberg Tables

  • Resolved Rajesh Namase

    (@namaserajesh)


    2 years, 4 months ago

    Hello,

    I have added a table using Gutenberg editor; it’s not responsive, but whenever I add a table using custom HTML, it’s responsive.

    If you check the link, you will find a table under the heading “How to Choose the Best Laptops for Homeschooling?” that is not responsive because I used Gutenberg editor for that table.

    How to fix it? Please help.

    The page I need help with: [log in to see the link]

Viewing 8 replies - 1 through 8 (of 8 total)
  • Plugin Author Nikolay Nikolov

    (@nnikolov)

    Hi.
    The problem is that on the same page there is a table inside a table. For example under “#1. HP Pavilion 15”. And unfortunately one of the downsides of the plugin (which I have listed on the front page of the plugin, in the description) is that it is not compatible with such pages and it skips the whole page.
    To use the plugin on that page you have to remove all instances of a table inside a table, and replace the outer table with some other structure, like a div layer or something.
    Regards.

    Thread Starter Rajesh Namase

    (@namaserajesh)

    Hello Nikolay,

    Thanks for the quick reply.

    With due respect, I want to say that there is no any table tag inside the table tag.

    Screenshot: https://ibb.co/9TjRsDJ

    Also, you can check another article https://techrt.com/lowest-data-consuming-video-calling-apps/ Here only one table is there still it’s not working. It used to work earlier but don’t know why is it not working now.

    Regards,

    Plugin Author Nikolay Nikolov

    (@nnikolov)

    There are tables inside tables on both pages. That is why the whole pages are skipped by the plugin. See: https://i.imgur.com/4Mwly1l.png

    Thread Starter Rajesh Namase

    (@namaserajesh)

    Hello Nikolay,

    I tried different combinations and found that the plugin works correctly even if there are tables inside tables, but you have to use a custom HTML block in that case. If we use a mixed block, i.e., Gutenberg Table block and Custom HTML block with Table HTML, then it’s not working.

    1. Custom HTML with nested tables – https://techrt.com/best-voice-changer-for-discord/
    All the tables are created using a Custom HTML block. All of them are responsive, although they are nested tables.

    2. If we use Custom HTML tables and Gutenberg table (single table, not nested one) – https://techrt.com/best-laptops-for-homeschooling/
    Here you can see that the Custom HTML block is working correctly even if we have used nested tables, but the Gutenberg table is only not responsive.

    It means if we use both nested tables and the Gutenberg table in the same article, then the Gutenberg table will not be responsive. Is there any way to make them responsive? Because nested tables are not an issue here, as mentioned in the plugin description.

    Plugin Author Nikolay Nikolov

    (@nnikolov)

    They may be responsive, but it is not from my plugin (you can see that they do not have the mtr-table class). None of the tables are affected by my plugin, if there is a single table inside table in the page content.

    Thread Starter Rajesh Namase

    (@namaserajesh)

    Got it; thanks a lot for your help.

    I added the responsive CSS and removed this plugin ??

    Plugin Author Nikolay Nikolov

    (@nnikolov)

    Cool, no problem. To achieve it without the plugin you need the CSS but also to do changes to the HTML code of the table. Like it is shown here: https://nikolaydev.com/make-tables-responsive-html-and-css-example/

    Thread Starter Rajesh Namase

    (@namaserajesh)

    Got it. I will try it out. But seems like it’s not that much easy ??

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Doesn’t Work with Gutenberg Tables’ is closed to new replies.