Join GitHub today
GitHub is home to over 28 million developers working together to host and review code, manage projects, and build software together.Sign up
Fix table header and body column misalignment (responsiveness using word-break: break-all) #10230
Fixes #9779 - table header misalignment issue. This PR takes a different approach to that originally proposed in #10011, opting to wrap text instead of using a container
How has this been tested?
Fixed width table cells
Types of changes
Bug fix (non-breaking change which fixes an issue)
referenced this pull request
Sep 28, 2018
Thanks so very much for working on this. Thank for pushing through despite all the feedback that keeps coming in, I know it's hard to keep the shipping spirit intact. This is great.
So I say ship it. It's definitely clear that the horizontal scrollbar solution didn't work in the previous implementation — I'll still explore alternatives that don't require a wrapping div. But I also understand the desire to not have that wrapping div, which is totally fair.
I think it's an opportunity for a 3rd party block to create a new responsive table block, one that perhaps can reflow too, because it doesn't have to rely on the stock table markup like the core one does.
I still think the horizontal scrollbar is the better responsive solution, I would rather horizontally scroll a budget spreadsheet on my phone that have it reflow into single letter columns. But I recognize this is already a tall order on a phone.
Here's an exploration that seems to work for responsiveness:
The code is much simpler, and adds — as far as I can tell — a horizontal scrollbar on the table itself when necessary. It relies on setting the table itself to be
@jasmussen - I did explore the approach in your codepen link, but unfortunately
I think wrapping text is the pragmatic solution for now.
One way to support overflow could be to make it an option in the block sidebar, so that at least the user opts-in to it. It might be worth exploring that on a separate issue.
Yep. I appreciate all the care that's been put into this. I think we shouldn't let perfect be the enemy of good. I very much like the idea of at least improving the responsiveness beyond word-wrap with an off-by-default option in the sidebar, but toally good to ship this.