Sticky header

Hi,

thanks for your post, and sorry for the trouble.

Without the FixedHeader Extension, I can only think of a CSS solution:

You could add this to the “Custom CSS” textarea on the “Plugin Options” screen of TablePress:

.tablepress-id-217 thead {
    position: sticky;
    top: 85px;
}

However, this will only work if you turn off the horizontal scrolling (i.e. remove the responsive=scroll parameter from the Shortcode). This is a technical limitation of this CSS approach, which requires that there are no elements with scrolling around the sticky header row.

Regards,
Tobias

Thanks a lot for the code

I need to have the responsive=scroll because otherwise, the width of the page breaks on smaller screens. If I add the “fixheader” plugin, will I be able to keep the table scrolling? Or is there a way to have a sticky header on the bigger screens but a non-sticky header for small screens?

Thanks again

Hi,

you can keep the scroll mode with FixedHeader, if you then hide the fixed header on small screens (as it will not be scrolling together with the table).

To hide the fixed header on mobiles, please add this to the “Custom CSS” textarea on the “Plugin Options” screen of TablePress:

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

Regards,
Tobias

Thanks Tobias, I went ahead and installed the “fixedheader” plugin.

I tried the following shortcode, it seems to be working perfectly in the backend (when I am logged in to the website) but when I log out to visit the page as a visitor, the header doesn’t stick.

[table id=217 responsive=scroll datatables_fixedheader=top datatables_fixedheader_offsettop=85 /]

I also tried without the “responsive=scroll” and it didn’t work when logged out of the WordPress Dashboard.

is there anything I can do to fix this?

Thanks a lot

Hi,

it seems that you are using WP Rocket or some other optimization plugin that is adding lazy loading and the defer attribute to script tags. Can you turn that off or at least exclude the DataTables JS files from this?

Regards,
Tobias

Thanks a lot!!!!

I unchecked the “Defer JS” for this post and it is now working.

On the mobile screen, the table scrolls horizontally but the header is fixed (part of the header is invisible). Is there a solution for that too?

Hi,

did you add that CSS code to the “Custom CSS” as well (and flush the CSS caching plugin’s cache)?

Regards,
Tobias

I just did, the header doesn’t stick to the table on mobile but it scrolls fine and the page is not broken.

If it’s not possible to have a sticky scrolling header on the mobile, I am pretty happy to where we got it.

Thank you for the awesome plugin and for the exceptional support!

Hi,

great! Yes, this is what we can do up until here.

In the premium versions of TablePress 2.0, which will be available soon, it will be possible to have both, FixedHeader and Horizontal Scrolling on mobiles ??
For some early information, please see https://tablepress.org/8-million-downloads-tablepress-2-0/

Regards,
Tobias

I got pretty much what I wanted with your support and I am happy with what we have done for now.

I can’t install the new version yet as I am not much of a tech-savvy but I am really looking forward to trying it when it’s complete and you recommend it to people like me.

I tried different table plugins in the last 7 years but none are as easy to use and light on the website. It’s amazon how your plugin doesn’t reduce the speed and performance of the website.

Thanks again!

Hi,

thanks for the kind feedback, I really appreciate it ??

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