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

Open
CodeProKid opened this Issue Oct 30, 2018 · 3 comments

Comments

Projects
None yet
4 participants
@CodeProKid
Copy link

CodeProKid commented Oct 30, 2018

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
@AndreKelling

This comment has been minimized.

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

This comment has been minimized.

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

This comment has been minimized.

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment