Set Table Column Width to Stop Cutting Up Words
-
Hello,
I have added a table to one of my pages. I have it on the default setting for column width (flexible rather than fixed widths). Unfortunately, by doing so the table has shortened the column widths such that the headings for some of the columns are cut in half, which looks ridiculous. However, I would not like to use fixed with because some of my columns are legitimately much wider than others and having them all the same width is impractical.
My headings: Workshop (the title of the workshop), Ages (the age group the workshop is geared for), Descriptions (a couple of sentences about the workshop), Time (the approximate length of the workshop).
With flexible column widths, the title Ages gets chopped into two lines Ag-es and the title Time into two lines Tim-e, which, again, is absurd. This chopping only shows on the preview and actual page, not on the page opened for editing.
But, if I pick fixed column widths the table gives me the same amount of space to write a two-three sentence description as for the entry 1.5 hrs, which, again, is impractical.
There has to be a middle ground. Please could someone tell me what it is and how to make it happen?
Thank you!
-
Hi again, the issue here actually seems to be with the CSS for the block itself. It’s specifying “Break Word” — which may be appropriate for much more complex tables, but in your case it’s not necessary.
I’ll see if I can dig into this a bit. Quick question though: when you launch this site, will you be upgrading? If you’ll be using Premium, we can fix this with a line of CSS code. If you won’t be, we’ll need to see if we can chase down another way to handle it.
And another question: will your readers be viewing this site from mobile? If so, you may want to reconsider using Tables. Try resizing the screen so it’s narrow like a phone, and you’ll see why.
There are some creative workarounds: using CSS to “collapse” the table, if you like a table layout, for example. Again, you’d need Premium for that.
But, you could also set up a column layout (which will collapse nicely on small screens) and put each class in its own “box” in those columns. And then just list ages and time under the class title. There are lots of potential options.
-
Hello,
Thank you for the quick and thoughtful follow-up.
At the moment we will not be upgrading to a premium account. We are a small, fairly new business that got hit pretty hard by covid-19 so unfortunately cannot afford any upgrades at this time.
Yes, it is likely that some of our readers will be looking at the site from a mobile device. Thank you for pointing out the concerns for this audience. I will get my business partners to have a look on their devices and see what they say.
Thank you for the suggestion of using columns instead. I spent a couple minutes just now playing with that idea. It is not quite what we were hoping for but if I make a 50:50 column for the main block then put a 70:30 column into each half I can somewhat mimic the type of table we were trying for. I will run it past my partners and see what they think.
Finally, thank you for looking into other options for us. We are hoping for a table, and I appreciate that you are exploring how to make that happen and what we might do instead in case it cannot happen.
-
Oh! To clarify, I wouldn’t use columns as a table as that could get messy on smaller screens. I just meant put each class in its own box, and let those show in columns. It wouldn’t be a table at all, just another way of displaying the classes.
I am going to see what can be done about the “Ages” column showing up as “Ag es” though. Thanks for bringing that up.
-
I’ve filed an issue here. I hope you don’t mind me adding screenshots — the content illustrates the problem more than a bunch of random fake words would. If it bothers you, though, let me know and I’ll swap out the images for some made-up content.
https://github.com/WordPress/gutenberg/issues/24393
I also included the CSS fix, should you decide to upgrade later.
- The topic ‘Set Table Column Width to Stop Cutting Up Words’ is closed to new replies.
WordPress.com Forums 