Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Min-width needed on table columns #11266

Closed
CodeProKid opened this issue Oct 30, 2018 · 4 comments
Closed

Min-width needed on table columns #11266

CodeProKid opened this issue Oct 30, 2018 · 4 comments
Labels
[Block] Table Affects the Table Block Needs Testing Needs further testing to be confirmed.

Comments

@CodeProKid
Copy link

Describe the bug
Hi there, I was trying to add a table of data with three columns. The first two columns contain just a word or two, and the third column contains a full sentence or two, this has caused the first two columns to collapse to the point where they just have two or three letters stacked on top of each other.

Things look OK on the front end of the site, but it's borderline un-usable on the backend. (see screenshot below)

The only way to fix this is to switch to "fixed width" but then you can't adjust the width of the columns. Seems like that feature is being worked on in #9801

To Reproduce
Steps to reproduce the behavior:

  1. Create a new post
  2. Create a new Table block with three columns and a few rows
  3. Just put a few characters in the first two columns, and then put a few sentences in the third column

Expected behavior
I expect the columns with only a few characters to collapse to a certain point, the characters shouldn't start stacking on top one another.

Screenshots
screen shot 2018-10-29 at 8 07 40 pm

Desktop (please complete the following information):

  • OS: OSX 10.13.5
  • Browser: Chrome 70.0.3538.67
  • Plugin Version: 4.1.1
  • WordPress Version: 4.9.8
@designsimply designsimply added Needs Testing Needs further testing to be confirmed. [Block] Table Affects the Table Block labels Nov 5, 2018
@AndreKelling
Copy link

AndreKelling commented Nov 15, 2018

same here.
looks weird for the editors.
fixed width table cells option is there but needs configuration first..
might be easy to fix with a min-width CSS rule for table columns.

table_column_width_issue

@MarkRH
Copy link

MarkRH commented Dec 7, 2018

Hmmm.. WP 5.0 with its built-in Gutenberg still has this problem. Since Gutenberg is baked into WP now, is this still the appropriate place to post issues?

@MarkRH
Copy link

MarkRH commented Dec 7, 2018

Looking at the CSS, it seems this is causing it in my case (with TwentyTwelve theme) on the front-end:

.wp-block-table td, .wp-block-table th {
	padding: .5em;
	border: 1px solid currentColor;
	word-break: break-all;
}

This is located in /wp-includes/css/dist/block-library/theme.min.css?ver=5.0
Setting word-break to normal or unset fixes it.

Before:
image
After:
image

@youknowriad
Copy link
Contributor

It seems like the word-break issue for me is now fixed. Let me know if you're still experiencing issues.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Block] Table Affects the Table Block Needs Testing Needs further testing to be confirmed.
Projects
None yet
Development

No branches or pull requests

5 participants