Hey Dylan

wpDataTables is a responsive plugin, and it should automatically adapt to the width of the device, so there should be no need for you to add any custom CSS to have the headers appear on mobile/tablet devices.

Here's an example of a responsive table from our documentation:

If you're having any issues with showing headers, it could be caused by a conflict with another plugin or the theme you're currently using.

Hi again Dylan.

While wpDataTables is designed to be responsive out of the box, I understand that the default formatting may not meet your specific needs. Unfortunately, we don't offer custom CSS services, especially when the feature already exists in the plugin. However, if you can clarify exactly how you'd like the headers to appear, I'd be happy to take a look and see if I can offer some guidance. While I can't promise a custom solution, I'll do my best to assist.

Hi Dylan,

Aleksandar is on a vacation, so I will take over the ticket.

Can you confirm that you are not using our own built-in 'Responsiveness' option and this is a completely custom CSS solution you made to get the table looking like that for mobile screens?

I just presume you disabled that option, but wanted to make sure.

As Aleksandar said, our Support does not cover custom work, which seems to be the use case here, but we can see if our developers find the time soon to see if maybe they could advise what you could try, based on your CSS and what you treid so far.

If I may try first, with my limited knowledge, I notice you are calling a header element here, on this line and you set it to be "display : none", so what happens if you try to remove or comment that 'display : none' property for the 'thead' element, does that show the headers in that case?

.responsive.display.nowrap.data-t.data-t.wpDataTable.dataTable thead {
    display: none;
  }

Let me know if that maybe helped to get the headers to start showing, since it seems you have hidden them with this custom CSS line?

Then we will see if further inspection is needed.

Thank you.

Hi Dylan,

Thank you for this update, we can now see the headers are appearing, all the way on the left side/opposite of the values which are on the right.

Looking from your previous screenshot, it seems you wish to move these header labels to the right side of the 'left edge' of the page, right?

Can you try something like this :

.responsive.display.nowrap.data-t.data-t.wpDataTable.dataTable td:before {
    position: relative !important;
    left: 10% !important;
}

This is going to move the element from the left edge, the more percentage ( or pixels) you set to the 'left' property, it is going to move it more to the right.

I hope that helps.