Table Chart in WordPress Editor

  • Hello, I recently added a table chart from tablesgenerator.com to my WordPress Gutenberg visual editor and the table doesn’t seem to appear the same as it does on the website. The divider between the categories disappears and so do the colours.
    Please see an example of how the chart looks on the website:https://postimg.cc/cgsj8v37
    Here is an example of how it looks in WordPress after pasting it in the editor:https://postimg.cc/hfqDZrVp

    Please let me know if I am missing something.
    My theme is: Posterity

    Thank you ??

    • This topic was modified 3 years, 11 months ago by antcrescendo.
    • This topic was modified 3 years, 11 months ago by antcrescendo.
    • This topic was modified 3 years, 11 months ago by antcrescendo.
Viewing 4 replies - 1 through 4 (of 4 total)

  • Hey!

    Have you tried copying the CSS code that’s in the bottom section of tablesgenerator into the Additional CSS section on your site? That might be the culprit for the missing divider and color.

    Just looking at the screenshots supplied, doesn’t show any of the CSS on your site.

    I hope that helps.

    Thread Starter antcrescendo

    (@antcrescendo)

    Hello, @macariojames hope all is well! If I copy the CSS at the bottom of the table generator website and paste it into my theme custom CSS tab, wouldn’t it affect my entire site? I am looking to add a table chart to specific pages. You can actually customize the table once it’s in the visual editor, however, you cant add a divider or add colour to specific columns. You can only add colour to the entire table and add or remove rows/colums.

    Thank you for the quick reply, hope to hear from you soon!

    Hey!

    That is true, if you posted the code as is, most of those styles would impact the whole site. A simple way to get around that is to alter the code slightly by specifying a unique class for each table.

    Actually, it looks like your code does that with what can be seen: .tg .tg-38et the .tg-38et should be the specific table you’re putting on each page.

    Try applying styles to each table by its unique name (or you could do ID).

    Thread Starter antcrescendo

    (@antcrescendo)

    Hey @macariojames, would you mind elaborating on your paragraph below.
    “Actually, it looks like your code does that with what can be seen: .tg .tg-38et the .tg-38et should be the specific table you’re putting on each page.”

    My apologies I am fairly new to HTML.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Table Chart in WordPress Editor’ is closed to new replies.