Hey everyone,

I have been using the paid version of WPDatatables for about one week now and I have to say that I am really satisfied. Everything works as expected, but I am facing three small issues which I need your help with. I am not an expert in CSS and would really love if you could help me.

1. Header styling of my tables via CSS on Desktop/Tablet/Mobil

I know that I can style all of my tables via Settings > Custom JS and CSS.

However I am having trouble to edit the text size/align etc. of my header. I tried several commands by now but it's not working. 

I tried this but it removes the header completely. Can anyone give me the command how to tag the header? From there I know how to edit the size/align etc.

I would like to style all headers of all my tables at once. 

Fixed it myself, I think:

table.wpDataTable th {

font-size: 14px !important;
font-weight: 600 !important;
text-align: left !important;
font-family: Roboto !important;
border-top-left-radius: 5px !important;
border-top-right-radius: 5px !important;
   }

2. Buttons on Mobile devices

I would love to move the buttons above my tables on mobile (text align to the left). Currently they look a bit stuck and out of place (please see the screenshot 1 attached).

3. Spacing on Mobile devices below the table

The bottom spacing for the 1 2 3 4 5 .... below the table looks very weird. How can I fix that? (please see screenshot 2 attached).

Thanks in advance for your help. I really appreciate it! 

Harry

Hey Aleksandar,

thanks a lot for your reply. I don't think, it's about my homepage. I am only using Elementor, Elementor Pro & WpDataTables so far. No other Plugins.

In addition to that you have the same issue on the example pages on the WPDataTables Website. The only difference is that #2 isn't visible on mobile devices at all. Please see the attached screenshots.

How to I tag the Buttons #2 / Pagnatation #3 in CSS just for mobile devices? I would like to try to add some text align / margin, but I don't know how to tag them. That should fix the issue easily, or what do you think?

Thanks in advance.

Just tried to add margin on general settings and single table settings. No effect. Just copied your piece of code. It didn't change anything. Any idea? :/

__

Since it's looks pretty difficult to move the buttons, is there a way to make the "show entry option" invisible on mobile devices? Exactly like its on the WpDataTables Example Website. That way the buttons doesn't look so out of place/stuck.

My CSS settings look like this:

table.wpDataTable th {
font-size: 14px !important;
font-weight: 500 !important;
text-align: left !important;
font-family: Roboto !important;
   }
th.wdtheader.sort.numdata.float {
border-top-right-radius: 5px !important;
}
th.wdtheader.sort.expand {
    border-top-left-radius: 5px !important;
}
   
@media screen and (min-width: 780px) {
   .wpDataTablesWrapper div.wdtscroll {
     overflow-x: initial !important;
}
}
@media only screen and (max-width: 600px) {
.wpdt-c.wdt-skin-aqua .wpDataTablesWrapper.wpDataTable .dataTables_paginate .paginate_button, .wpdt-c.wdt-skin-aqua .wpDataTablesWrapper.wpDataTable .dataTables_paginate .ellipsis {
margin-bottom: 5px !important;
}
}

Thanks a lot for your help. I really really appreciate it!

Hi,

No, I won't do that sorry.

I will try to fix the issue myself. Thanks for the help anyway. You can close this.

- Harry