tablepress responsiveness

I think reducing the space in the columns would help too. What css code would accomplish that? Thanks so much.

Hi,

thanks for your question, and sorry for the trouble.

Making tables responsive on small devices is very tricky.
The reason why you only see three columns of the five is that the content in the cells simply requires more. As you can see, the word “Column” is what defines the minimum width of the columns on small screens. The browser can then not apply any further word wrapping, because there are no more places for that.
To make all data visible, you’d need to have to reduce the font size on small screens, which is not a good idea on small screens though. Your idea of reducing the space in the cells (called “padding”) would also be possible (e.g. with this “Custom CSS”):

.tablepress-id-1 th,
.tablepress-id-1 td {
  padding: 2px;
}

but that’s also ugly, in my opinion, because the data can’t “breathe”.

Instead, you could consider an approach that is available as a TablePress Extension: https://tablepress.org/extensions/responsive-tables/
That will basically flip the table to the side and make it scrollable.

For that (but also in general), you should turn on the “Table Head” checkbox below the table input fields. That way, you won’t have to fake that table head by adding the <strong> tag to your table’s first row manually.

Regards,
Tobias

HI, I ‘m happy to give a donation for the responsive tables extension when I get it working. But when I use the [table id=11 responsive="all"/]

the table header goes down the side where it is not meant to be. I have tried several tables.

This is is with the above shortcode
And this is it without responsive –
https://www.newpowerschool.com/english-lessons-baiyin/

If you would advise that will be great. thanks.

(p.s. I thought I posted this but couldn’t see it in this support forum thread….sorry if duplicated)

Hi,

thanks for your question, and sorry for the trouble.

First: No worries, you have not posted this before, so no duplicate ?? )

About your responsive tables problem:
Well, for the Extension, the header row is actually in the correct place, as that’s the idea of the Extension here: The table is basically flipped to the side and the table content is scrollable horizontally.
As you only have three rows right now, this doesn’t make that much sense yet, and there’s a small other problem due to the images in the cells. Because of that, we’ll need to force the row to have certain row height so that everything lines up.
Please add this to the “Custom CSS” textarea on the “Plugin Options” screen of TablePress:

.tablepress-id-11.tablepress-responsive-all .column-1 {
  height: 130px;
}

Regards,
Tobias

Hi,

good to see that you already implemented this CSS! ??
For the second row, we can now do the same:

.tablepress-id-11.tablepress-responsive-all .column-2 {
  height: 20px;
}

Now, due to some issues in your theme, you’ll also need to adjust the padding slightly.
So, please add this CSS code as well:

.tablepress-id-11.tablepress-responsive-all th,
.tablepress-id-11.tablepress-responsive-all td {
  padding: 8px !important;
}

Regards,
Tobias

I’m not a developer but i ran into this site, maybe it can help create better behavior on small screens.

https://css-tricks.com/responsive-data-tables/

Hi,

thanks for that link! I have seen some of the examples there before, but they are not that easy to implement reliably for the different ways how people use tables.
I’m however planning to offer more possibilities for responsiveness in the future.

Regards,
Tobias