Fixed Header not working with Scroll-X: False

Hi,

thanks for your post, and sorry for the trouble.

Can you please post a link to the page with the table where this problem happens, so that I can take a direct look? Thanks!

As a warning: I don’t know the internal code of the FixedHeader JS library (I only make it available as a TablePress Extension), so it might not at all possible to make it work with scroll-x: false;, but we can check.

Regards,
Tobias

Hello

Thanks for the reply. Here is a URL where you can see this:

https://www.ilovefreesoftware.com/22/articles/sample-article-table-post.html

password: tablepress

Is there a way to disable horizontal scrollbar, without using scroll-x: false? I tried unchecking the box “Enable horizontal scrolling, to make viewing tables with many columns easier.” but that did not work when the table has many columns.

Thanks.

Hi,

thanks for the link! From what I can see, you added that scroll-x: false; in the wrong place anyways.
Please remove it again. After that, the FixedHeader Extension should work again.

Also, please uncheck the “Horizontal Scrolling” checkbox, as that is also interfering.

To make things fit better (hopefully without needing scrolling), we can try to reduce the padding, e.g. by adding this to the “Custom CSS” textarea on the “Plugin Options” screen of TablePress:

.tablepress-id-4 th,
.tablepress-id-4 td {
    padding: 4px;
}

Regards,
Tobias

Hello – Thanks for the reply. Actually, scroll-x was working perfectly for me (I don’t want any horizontal scroll, and scroll-x helped with that).

I have removed scroll-x, added the css code that you provided. The option for Enable horizontal scrolling was already unchecked.

Now Fixed header is working, but there is still a bit of horizontal scrollbar. Is there a way to get rid of it (I might have to add 2-3 more columns to the table, so adjusting padding further might not work).

Thanks.

Hi,

yes, scroll-x might have helped, but it breaks FixedHeader (and all the other JS), so it’s actually the same as turning DataTables off (just worse) ??

For the horizontal scrollbar: I can’t really think of a way to prevent that, especially not if you want to add more columns. The only way around it would then be to increase the content width in your theme, i.e. to give the content of the page more space (horizontally).

Regards,
Tobias

Hello

Thanks for the reply. Unfortunately, I have already given the complete page width to the table, so there is no scope to expand that.

Any idea why does unchecking the option “Enable Horizontal scrollbar” does not help. I thought it would do the same that scroll-x false does.

I would really appreciate if you could think of any other way to freeze header while disabling the horizontal scrollbar.

Thanks again.

Hi,

the scroll-x is not even a DataTables setting, it’s just CSS, but that does not apply here.

The FixedHeader adds its own horizontal scrolling, which is why unchecking the checkbox does not influence this. It’s just a technical limitation that the table can not be wider than the page width, while having that fixed header at the top.

And well, while you might have given the complete page width to the table, you could modify the theme CSS to have a wider page width ?? You would just have to adjust the theme CSS code.

Regards,
Tobias