Fixed Header + Responsive Scroll

Hi,

thanks for your post, and sorry for the trouble.

I see what you mean, and I have seen this issue in the past as well. Unfortunately, I’m not aware of an existing solution for this ?? The difficulty here essentially is that the fixed header row is a separate DOM element that does not have a “connection” to the scrolling table.

Regards,
Tobias

I see. Is there another method you would recommend for better showing the header items on mobile as you scroll? Or is there a way to use the fixed header online on desktop but not on mobile? Do I need two separate tables in order to make that happen? Please advise.

Hi,

the idea to only use the FixedHeader on desktop is indeed what I would suggest here. For that, you could use CSS code that hides the FixedHeader row on small screens. For example, add this to the “Custom CSS” textarea on the “Plugin Options” screen of TablePress:

@media screen and (max-width: 768px) {
  .tablepress.fixedHeader-floating {
    display: none !important;
  }
}

This would hide the fixed header row on screens smaller than 768px.

Regards,
Tobias

That works, but how would you recommend keeping table headers visible on mobile? For large tables, not having the headers to reference as you scroll down is troublesome.

Hi,

my suggestion would be the collapse mode then. This way, you would see the header cells directly next to the content.

By the way: I just learned that there’s work going on for making FixedHeader work with scrolling! ?? I can’t say when it will be available in the Extension yet, but probably soon.

Regards,
Tobias