[Resolved] Table display in WP Classic editor

[Geoff]

My site is predominantly text based and so we use the WordPress Classic editor. We use a lot of tables for formatting purposes and the display of these in the Classic editor will change when I install the GP theme on the live site. With GP the columns become equal width rather than fit to contents. Is there a way of removing the equal column widths so that I can retain the ‘normal’ table display?

[David]

Hi there,

can you share a link to a post/page where i can see a table ?

[Geoff]

David
Sorry if I didn’t make myself clear, but it’s the display of tables in the Classic editor itself, not on a site, so I cannot provide a URL. I had taken screenshots of the editor, normal and when using GP as the theme, but couldn’t attach them to my original post. I will email them if it would help, just let me know where.

[David]

So the issue is only in the Classic editor ?

To add screenshots you need to save them in a cloud drive / media library or use a image sharing site and provide us the URLs to them. You can add those URLs to the Private Information field.

[Geoff]

David
Yes, only in the Classic editor. The tables are fine in a post. Links to screenshots have been added to the PI field.

[David]

What theme are you using that displays the tables correctly ?
Sorry for all the questions but i can see of they’re doing something different

[Geoff]

David
It’s a very old one (15+ years) that was called WP-Andreas09, but it was updated three years ago to bring it in line with the then current WordPress requirements.

[David]

Sorry for the late reply not able to see a solution to this, i am going to pass it over to Tom to see if he has any ideas.

[Tom]

In order to add CSS to the classic editor, you need to use this function in your child theme: https://codex.wordpress.org/Editor_Style

So you’d create a CSS file for the editor only, and then reference that file using the function above.

Let me know if that makes sense or not 🙂

[Geoff]

Tom
Thanks, but I don’t have a child theme. I have made a few changes using additional CSS and have three small PHP additions applied using Code Snippet.

What I am having difficulty in understanding is why your theme modifies the layout of tables in the Classic editor display so that they have equal column widths rather than ‘fit to contents’ (which is how they correctly appear on a published post).

If my bloggers have to put up with the equal column widths when they are editing a post then so be it, but I would be much happier if they had the correct display that they are used to.

[Tom]

Our theme applies the same CSS to tables in the editor that it does on the front-end so that the view is somewhat consistent.

It’s not possible to add CSS to the classic editor without a child theme, unfortunately. If you set one up, you can apply your own CSS to the editor and make it look however you like.

Personally, I would make the switch to the block editor, as it’s much more user-friendly to input your content, especially with tables.

[Geoff]

Tom
“Our theme applies the same CSS to tables in the editor that it does on the front-end so that the view is somewhat consistent.”

That is not true. In the Classic editor the columns are equal width. In a published post they are as intended ‘autofit to content’. See the screen shots I provided previously for the normal display of tables in the Classic editor and the display with your theme.

[Geoff]

Tom
For completeness, I have provided a link to the published post display, which is the same for both for my live site, which has the correct table display in the Classic editor, and my sandbox, which has your theme activated and the incorrect equal column width in the Classic editor.

[Tom]

Hmm, strange – are you using the Flexbox or Floats option in Customize > General?

Either way, you will need to:

a) Add a new editor-style stylesheet using a child theme
b) Use the block editor instead of the classic editor (this is definitely recommended, as support for the Classic editor will continue to become less and less in the coming years).

[Geoff]

Hi Tom
I haven’t changed from Floats, which was the original option when I downloaded your theme. I have removed all my additional CSS, and disabled the Code Snippet plugin, but the table display in the Classic editor remains the same, so it is your theme that is creating the equal column width in the Classic editor, which shouldn’t happen.

My apologies for saying yesterday ‘that is not true’, I had other unrelated issues at the time, when I meant to say ‘that doesn’t appear to be the case’ because of the different layouts in the Classic editor and a published post.

I appreciate that the block editor is now the preferred option but I have 30 bloggers, most of whom are elderly and would not cope with it, so that is why I am trying to find a solution for displaying tables correctly in the Classic editor.

I appreciate that support for the Classic editor will decrease in the future, but I would like to retain it for as long as possible, in view of the nature of my site (predominantly text based). As I said before, if my bloggers have to put up with an unfamiliar display in the Classic editor then I will accept that.

[Author]

Posts