Table Header Appears Twice When Horizontal Scrolling Is Enabled

  • gamgigi1608

    (@gamgigi1608)


    4 days, 2 hours ago

    Hello TablePress Support Team,

    I am having an issue with TablePress on my website.

    I would like my tables to be horizontally scrollable on smaller screens because some of my tables have many columns. However, when I enable Horizontal Scrolling, the table header appears twice on the front end.

    The header is displayed correctly once in the TablePress editor, but after enabling Horizontal Scrolling, the header row is duplicated on the website.

    I have checked the TablePress settings and the table content, and there is only one header row in the table. I also tried adding custom CSS to fix the issue, but the problem still occurs.

    Could you please help me identify what is causing the header to be duplicated and how I can fix it?

    My requirements are:

    • Keep Horizontal Scrolling enabled
    • Allow users to scroll the table from left to right
    • Display the table header only once
    • Apply the solution without affecting other tables on the website

    I have attached screenshots showing the issue for reference.

    Thank you for your help.

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Support Tim Crull

    (@galanos)

    3 days, 17 hours ago

    Hi @gamgigi1608,

    Thanks for your post and sorry for the trouble!

    Your description and screenshots are very helpful, and I think I recognize the issue. However, to make sure, I’d need to check the live page with the table. Could you please provide the URL to that? Thanks!

    Best wishes,
    Tim

    Thread Starter gamgigi1608

    (@gamgigi1608)

    1 day, 19 hours ago

    https://bltassociates.co.th/sliding-gate-automation/

    I have temporarily disabled the horizontal scrolling feature for the tables.

    • This reply was modified 1 day, 19 hours ago by gamgigi1608.
    Plugin Support Tim Crull

    (@galanos)

    1 day, 16 hours ago

    Hi @gamgigi1608,

    Thanks for your reply and for the URL! That’s alright; I could see what’s wrong without Horizontal Scrolling active—which actually isn’t the root cause:

    When the feature is enabled, to facilitate horizontal scrolling on all devices, TablePress adds a duplicate of the table with only the header row and hides the original table’s header. Hiding is done via CSS code that’s included with TablePress.

    When that CSS code is manipulated or missing, the duplicate header might be displayed. This is what happens on your site. The reason is quite simple: visitors aren’t allowed to access the CSS file due to your server’s security configuration. If you try to call the file directly, you’ll see a “HTTP 403” error, which means that you’re not authorized to access the resource: https://bltassociates.co.th/wp-content/tablepress-combined.min.css

    This affects not just Horizontal Scrolling, but all of the default styling of TablePress elements—and maybe those of other plugins, too.

    The cause of that questionable restriction is nearly impossible to analyze from outside your system. You might find some setting restricting access to the “/wp-content” directory in your server manager application, like cPanel or Plesk, but I recommend you contact your admin or host to investigate.

    Let me know if that helps.

    Best wishes,
    Tim

Viewing 3 replies - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.