Table not collapsing

Hi
thank you, that seems to work.
I just got some sport book from your wishlist to thank you.

Btw, not so important, but on this page
https://shoutkey.com/meal
I have a different type of table under the word “Liberator” (there’s a big orange A and a table with the image “Liberator Shapes” on the left. This table doesn’t seem to adapt at all.
I might have set some fixed width in the CSS, I will check.

But if I don’t set any fixed width, I don’t remember, how are the width of the columns chosen?

D.

Hi Deon,

thanks for sending me something from my wishlist, I really appreciate it and I’m really looking forward to reading it! ??

Argh, unfortunately, I seem to have missed the time window for https://shoutkey.com/meal again. Can you please create a new link?
If you don’t set widths, the browser will automatically choose them to achieve a nice/uniform layout.

Regards,
Tobias

Hi Tobias,
no worries, I hope it’s a good book.

So here’s the URL I was referring to in my previous message:
https://shoutkey.com/by

Thank you
D.

Hi Deon,

thanks for the new link! The cause here is that the image has a fixed width, but we can instruct the browser to shrink it, with this “Custom CSS”:

.tablepress-id-25 .column-1 img {
  max-width: 100%;
}

Regards,
Tobias

Hi Tobias,
thank you again.
But this would only solve it on 1 specific table.
What about if I want all tables with images to just behave normally like ‘text only’ tables.

Otherwise all tables with images won’t adapt, and only ‘text only’ tables will.

thanks
D.

Hi Deon,

then just apply this to all table cells:

.tablepress img {
  max-width: 100%;
}

Regards,
Tobias

Hey Tobias
thank you for your continued help.
You should make this plugin paid, considering the support you provide.

Anyways, I’ve tried putting that code into the plugins editor and it seems to work on that page I had linked to, but here:
https://shoutkey.com/steam
It makes all the images on the left of the table microscopic.

Now I have removed that code because it looks bad, but surely you can somehow check the effect it has on those tables with the images you’ll find scrolling down the article.

Why is that?

thank you
D.

Hi,

yeah, unfortunately, the code sometimes makes images look bad if the other columns in the row contain a lot of text. :-/
To work around that, you could maybe also set a minimum width, i.e.

.tablepress-id-123 img {
  min-width: 100px;
}

If you do this on a per-table-ID basis, the general code (from my previous post) can still be used.

Regards,
Tobias