Responsive table-scroll and fixed header clash

Hi,

thanks for your post, and sorry for the trouble.

I’m afraid that it’s currently not possible to use the FixedHeader Extension and horizontal scrolling together. These two features are not compatible to each other, sorry.

Regards,
Tobias

Hi Tobias,

many thanks for your quick response. That’s fine. Everything else is working really well, though, so thank you!

Best wishes,
Maria

Hi,

no problem, you are very welcome! ?? Sorry that I could not offer a solution here.

Best wishes,
Tobias

Hi Tobias,

Sorry- one further question regarding this thread:
I’ve been asked if it would be possible for you to write some code to fix this problem?

I’ve also noticed that the responsive table: scroll option works well, but I’ve just tried the responsive table: flip option and that doesn’t appear to work. All I have done is change ‘responsive=scroll’ to ‘responsive=flip. Am I missing something?

Many thanks.

Hi,

no, sorry, I’m not aware of a way to fix this problem sorry ??

Regarding the flip mode: You’ll also have to choose a device at which the flip mode should kick in, via the other Shortcode parameter that is explained on https://tablepress.org/extensions/responsive-tables/

Regards,
Tobias

Hi Tobias,

Thank you for confirming the problem with the fixed header can’t be fixed at present; I just needed to confirm this!

I’ve now added that bit of code and the table has flipped, so thank you for that.
The rows do not line up, though, and the ‘edit’ link previously at the bottom of the table now appears in the first row knocking all the other information down a line.

Hi,

here, we’d now need to assign row heights, which is sometimes necessary with the flip mode in some cases. For example, add this to the “Custom CSS” textarea on the “Plugin Options” screen of TablePress:

.tablepress-id-123 .column-3 {
  height: 50px;
}

You’d have to adjust the table ID, column number, and height value.

Regarding the “Edit” link: This is only shown to logged-in users who are allowed to edit the table, so normal visitors don’t see that.

Regards,
Tobias

Thanks, Tobias.
How do I select multiple columns? For example columns 1-4?

Hi,

you would have to repeat that code, with the properly adjusted height value. If that is the same for those columns, you can shorten the code to

.tablepress-id-123 .column-1,
.tablepress-id-123 .column-2,
.tablepress-id-123 .column-3,
.tablepress-id-123 .column-4 {
  height: 50px;
}

Regards,
Tobias

Hi Tobias,

That’s great! Many thanks for your help (again).

You’ve been extremely helpful!
Best wishes,
Maria

Hi,

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

Best wishes,
Tobias

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