Wondering if there could be any alternative fix for unresponsiveness. I'm guessing tables are by nature unresponsive though... If you have a few columns, you'll want to scroll them, not have them all squashed together. I wouldn't mess with the normal CSS rules of a table to make it more responsive. Could it help to wrap the table in a (scrollable) figure tag or something?

I think I had found a fix to this issue, but was holding off because I wasn't sure if everything was going to be redone as part of #6923. I'll see if I can find it on a local branch and compare to what @iseulde merged in #8767.

All good feedback, thank you.

As a preface, there are two features of the table block being discussed. One is the fixed layout, which is off by default and toggled on in the sidebar.

The other is the responsiveness, which, note, is stored in the theme.scss file and therefore something a theme has to opt into, to receive.

But the idea here is that every block should come with a minimum level of mobile responsiveness. And a "true" responsive table isn't really a table anymore, it's a rather complex collection of divs put together to look like a table. This is completely fair to explores separately, but as the vanilla offering we have to consider the basics which are accessible.

For that reason, the most minimal responsiveness I could find, was to have the table scroll horizontally, if less than 360px wide. You can see that here: https://codepen.io/joen/pen/RYojVZ

Due to the nature of how the display: table; property works, though, this involves some trickery to make the full width behave more like a div than a table, because the table will always try to contain its contents.

Here's a GIF:

If we can accomplish a minimally responsive table in a different way, I'd love suggestions.

I think the thead and tfoot should also be added. I feel a bit uncomfortable with changing the display of a table from the default, but if this is valid and the way to do it, ok. Is there any way tests could be added for this (unsure here)? This seems like something with so many different configurations that we could easily break in the future.

I could use some help getting this PR in ship shape if you have bandwidth. I feel strongly that all blocks we ship should have some measure of responsiveness, remember it's opt-in for themes.

Right now both the responsiveness and the fixed-cell-width are broken in master, so it would be nice to find some solution soon, even if we need to refine it later.

@jasmussen Cool, I'm fine with just restoring the display rule. Could we just add thead and tfoot with the tbody rule to display as a table as well? That makes sense right? Then it seems good to go.

Will do, feel free to separately track any concerns you have and we'll look at it. 👍 👍

Addressed the feedback. Thanks for the reviews.

If we need to refactor the table display values to not re-do the tbody/tfoot/thead elements, we need a wrapping div, see https://codepen.io/joen/pen/RYojVZ?editors=1100

this is what I see when I create a new table

It seems like styles on the frontend are inverted:

Fixed width

Flexible width

Hmm, you're right. And this suggests @iseulde was right to be nervous as well, because what causes the table to collapse like that is the changing to block display.

I pushed a fix in b7d41bf, and I do think we should merge this because it fixes a regression — it is frustrating that the fixed width switch is broken in master.

But if we discover that changing the display properties of the table, thead, tbody, and tfoot, we should look at an alternative fix, which I think would include a wrapping div, see: https://codepen.io/joen/pen/RYojVZ.

What do you think? Should we get this merged so we can fix the regression?

Oh, taking a look at the inverted styles in the Twenty theme.

Fix the fixed-width option in Twenty. Good catch.

Thanks, let's get this in and look at any other enhancements separately.

But if we discover that changing the display properties of the table, thead, tbody, and tfoot, we should look at an alternative fix, which I think would include a wrapping div

It looks like this is the cause of #9779:
https://stackoverflow.com/a/12153220

thead, tbody and tfoot need to be set to their default style properties for columns to properly align. We then also have the secondary issue that the table needs to be display: table for table-layout: fixed; to work.

Unfortunately it looks like we need another approach. Probably a wrapping div as you say @jasmussen.

Seeing as we're discussing it on #9801, I think I'll introduce a fix there. That PR also handily introduces a block deprecation, so probably makes sense to handle it there.