NSFW Tablepress responsive Bilder zu gro?

Hi Insomnis,

while I’m indeed German, I’ll reply in English here, as these are the English-language forums. More people can benefit from the solutions in this thread then.
If that’s an issue for you, we could maybe work on this via email, in German.

The problem here basically is the different height of the rows. We’ll therefore have to set a minimum height on the rows in the responsive mode (and that height has to be the height of the highest image, which is that in the second row). For that, please try adding this code to the “Custom CSS” textarea on the “Plugin Options” screen of TablePress:

@media (max-width: 979px) {
  .tablepress-id-16 td,
  .tablepress-id-16 th {
    height: 120px;
  }
}

Regards,
Tobias

Hey Tobias,

thanks for your quick response.
Well, my (school-)english is terrible but I’ll give my very best! ??
I’ve added the shown code for all of my tables and i have to say: it works perfect!!

You’re great, man.

I have one last question:

Your responsive addon fixes the headline (in my case “fun factory share, vibrating str.. and so on) @ left side of screen. Thats good.

But it would be great if the entrys “Shop Link, Platzierung” and so on also would be fixed @ top of screen while i am scrolling through the table. You know what i mean?

so, the user would leve lost overview.

Is THAT possible?

Thank you very much and have a nice (rainy) weekend!

Insomnis

Hi,

no problem, you are very welcome! ?? Good to hear that this helped!

For the other question: That is not possible with the Responsive Tables Extension, but you could try the FixedHeader Extension from https://tablepress.org/extensions/datatables-fixedheader/
That can fix the left column and the top row of the table, if they reach the edge of the screen. And with that Extension, the table is not flipped to the side, which might also be a bonus.

Best wishes,
Tobias

P.S.: In case you haven’t, please rate TablePress here in the plugin directory. Thanks!

Hey.

I’ve installed this extension and activated it with datatables_fixedheader=”left,top” @ one of my tables.
It’s really hard to describe what it does, but it really doestn what it should do! ??
Lets say: It destroys my table… kind of.

I would show it to you but i had to take my changes back ??

Any ideas?

And i got another question. Hope, its okay if i ask in this thread.
Whats the best way to higlight a column in wordpress?
That would be great to show whats the best product in the shown table.
You know what i mean? ??

Hi,

I assume that it shows the cells overlapping somehow? I have seen that before, but I don’t know why it happens, unfortunately. It seems to be a bug in the JS library that the Extension uses.

For highlighting a column, you can use some CSS like this:

.tablepress-id-123 .column-3 {
  background-color: #ff0000 !important;
}

Regards,
Tobias

Hey Tobias,

yes, thats exactly what it does.

So i guess u got no idea to fix this problem?

Thx.

Hi,

there are some things related to CSS that we could try, but for that I’d need to see the table in the broken state.
Unfortunately, there’s no guarantee that these ideas will work ??

Regards,
Tobias

hey Tobias,

okidok, I’ve activated the addon again @ https://www.strap-on-it.de/strap-on/umschnalldildo-vergleich/ (with datatables_fixedheader=”left,top”)
Please have a look! ??

Again i got n question about highlighting an column: Is it possible to give them just a border on the outline? Actually i got following css:

.tablepress-id-16 .column-2 {
border: 1px solid #ddd !important;
}

But with this one there is an border around every field.

Thanks for your support! ??

Hi,

thanks. Yeah, that’s what I expected. Unfortunately, I have no idea how to fix this ?? I just don’t know the code of the external FIxedHeader JS library well enough. Sorry.

For that border: You will basically have to add a border on the left and right only, with e.g.

.tablepress-id-16 .column-2 {
  border-left: 1px solid #ddd !important;
  border-right: 1px solid #ddd !important;
}

and only the first and last rows get top or bottom borders:

.tablepress-id-16 tr:first-child .column-2 {
  border-top: 1px solid #ddd !important;
}
.tablepress-id-16 tr:last-child .column-2 {
  border-bottom: 1px solid #ddd !important;
}

Regards,
Tobias

Hey,

oaky, i guess thats a litte bit sad, but not thaaat bad. ??
My border works. Thank for the code.

Finally, i got last one question:

If u can see in desktop version, the text and pictures in the tablefields are centered. But with the responsive addon they arent. They are @ top of the field.
I guess, thats because Left and Top header are changed.

How can i solve this problem?

Thanks!

Hi,

that should work if you change

.tablepress-id-16 td,
.tablepress-id-16 th {
  height: 100px;
}

to

.tablepress-id-16 td,
.tablepress-id-16 th {
  height: 100px;
  line-height: 100px;
}

Regards,
Tobias

PERFECT!!
Thank you very very much! ??

Have a nice day!

Hi,

no problem, you are very welcome! ?? Good to hear that this helped!

Best wishes,
Tobias

Hey,

sorry i have to disturb again ??
i had to convert 2 pages into articles and now in responsive view, the fieldentry are not centered again like i wrote 3 threads above (3 tables).
Can you give me the css to corret them?

Thanks.
https://www.strap-on-it.de/strap-on/umschnalldildo-vergleich/
https://www.strap-on-it.de/strap-on/umschnalldildo-bestseller/