Table not collapsing

Hi,

thanks for your post, and sorry for the trouble.

Can you please post a link to the page with the table where this problem happens, so that I can take a direct look? Thanks!

Regards,
Tobias

Hi Tobias,
yeah of course.
https://shoutkey.com/red

Thank you very much.
D.

Hi,

thanks for the link!
This is indeed related to the old version of WordPress. As a consequence, you are also not using the latest version of TablePress, which is however required by the Extension.
Therefore, please update to the latest version of WordPress and then also update all plugins, including TablePress.

Regards,
Tobias

Yeah I suspected it was that.

Update all plugins?

It’s too much. There could be so many compatibility issues. Do I really have to update all plugins I have to get this to work?

thank you
D.

Hi,

please start with WordPress and then update TablePress. That might fix this issue.

For the future, you should however keep WordPress and all plugins up-to-date, simply to keep your site and your visitors secure.
Believe me, getting hacked only once will cause more pain and work than going through to the updates and checking for compatibility.

Regards,
Tobias

Hey Tobias,
I was thinking, would it be possible to have the table resize/adapt but keep the same 3 column format as it is now? just of course with the rows becoming wider to accommodate more text.

I understand your 3 solutions to the responsive issue are of course aimed to help as many people as possible no matter how many columns their tables have. But in my case all my tables have just 3 columns, it would be so much easier if the table could just adapt like the rest of the text, keeping 3 columns (although much taller). Would this be possible somehow?

Thank you
D.

Hi,

that’s basically the natural behavior of tables, columns will shrink if the space is limited. This is however only possible as long as the content in the columns allows shrinking. However, very long words for example can prevent this, as the browser can not automatically add word-wrapping to them.

Regards,
Tobias

Hi Tobias,
I just saw a long time ago I had set this in my plugin CSS:

. tablepress {
width: 600px
)

So the table were cut.

So now it is so much better. But checking the page on screenfly, I noticed that on some displays (320px wide and less) the word on the right (which is the word: review) is cut. So it seems to adapt until a certain point? Anything I can do about that?

thank you
D

Hi,

Can you please post a new link to the page with the table where this problem happens, so that I can take a direct look? Thanks!

Regards,
Tobias

Hi Tobias,
yes of course:

https://shoutkey.com/equal

If you go to https://quirktools.com/screenfly/
and select iphone 3/4 for example, you see the word “review” is cut. The “w” is missing.

I’ve also tried this with other tables in other articles, and it’s the same.
In one article instead of the word “review” I have the word “see” in the third column, and in that case the word is not cut.

Thank you very much for looking into this.
D.

Hi,

yeah, this shows what I mean.
The long words like “experiment” in the first column and “Knobessence” in the second don’t leave enough room for “Review” to fit on small screens.

You could either reduce the font size or the inner cell white space (padding) e.g. with

.tablepress-id-123 th,
.tablepress-id-123 td {
  padding: 4px;
}

Regards,
Tobias

Hi Tobias,
so I definitely won’t reduce the font size.

But I can reduce the padding, but for all tables, because I don’t want to be there calculating how long are the words in each table etc.

Will that code you gave me reduce the padding for all tables if I put it in the plugin’s CSS?

Thank you
D.

or it will probably be:

.tablepress td {
  padding: 4px;
}

?

Btw I tested it now on screenfly, using Chrome Developer,
and it seems if I put padding 2px, it does fix it on a 320px screen,
but then on a larger screen the table looks so messy.

It would be good to have the padding to stay as it is (8px) and reduce to 2px on mobile screens, or if that is not possible, to at least keep the height of the cell and just reduce the
‘horizontal’ padding.

Any of these would work?

Thank you
D.

Hi,

this should only reduce the padding on small screens:

@media screen and (max-width: 350px) {
  .tablepress th,
  .tablepress td {
    padding: 2px;
  }
}

Regards,
Tobias