Hi,
thanks for your post, and sorry for the trouble.
We could reduce the padding a bit, but that’s probably not really going to help, as there will still be screen where things are wrong.
Therefore, the better approach might be to add Horizontal Scrolling (but without the Flipping as the Responsive Tables Extension offers it).
Can you therefore maybe simply try to enable the “Horizontal Scrolling” checkbox on the table’s “Edit” screen?
Regards,
Tobias
Hi Tobias,
Thank you for the quick reply.
I enabled Horizontal Scrolling and that makes an interesting change. For the data in the table it seems a little better to navigate around. However, the headers to the table are not scrollable and the final one “Locations” gets cut off to “Locati” on mobile.
Perhaps there’s a way to reduce the first column a bit more? The header is just 2 characters “ID” and the contents are links with text of just 4 digits (e.g. 3385) Yet that first column seems to take up a lot of room on mobile.
Let me know if you have any thoughts. Thanks again for the help!
Best,
Daniel
Hi Daniel,
yes, let’s reduce the padding here. Please try adding this to the “Custom CSS”:
.tablepress th,
.tablepress td {
padding: 6px 8px !important;
}
.tablepress th {
padding-right: 20px !important;
}
Regards,
Tobias
Hi Tobias,
That’s definitely putting it on the right track. It makes everything fit but the first column is perhaps a tad too squeezed in so I’ll need to mess with the padding values. However, this code did create a strange “double” header where there are now thin boxes right below the header. I can even mouse over them and make the highlighting color appear. Anyway to remove this second row of headers?
Best,
Daniel
Hi Daniel,
oh, indeed. To remove that, can you please also add this code?:
.dataTables_scrollBody .tablepress th{
padding:0px!important;
}
Regards,
Tobias
Perfect! Thank you so much for the speedy help Tobias!
Hi,
no problem, you are very welcome! 🙂 Good to hear that this helped!
Best wishes,
Tobias
