Table Width on mobile

Hi,

thanks for your question, and sorry for the trouble.

One idea could be to prevent automatic line breaks in the table. For that, please add this to the “Custom CSS” textarea on the “Plugin Options” screen of TablePress:

.tablepress-id-123 {
  white-space: nowrap;
}

where 123 needs to be changed to the correct table ID.

Regards,
Tobias

Thanks Tobias for your response.
I have tried that, but that then affects the desktop view, the columns are now overly large.

Any other ideas?

Thanks

Hi,

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!

Regards,
Tobias

https://www.fieldgroup.com.au/xero-vs-myob-accounting-small-business/
Thanks!

Hi,

thanks! As you are only using the “Horizontal Scrolling” checkbox in the DataTables features section on the table’s “Edit” screen, I’d here actually recommend to replace that with the scroll mode that the TablePress Extension from https://tablepress.org/extensions/responsive-tables/ offers. That might already do the trick here. So, please try unchecking the “Use DataTables” checkbox (as there’s no need for the library here then) and use that scroll mode as explained in the link above.

That might already lead to a better scrolling on small screens. If not, we can re-try the approach with disallowing automatic line breaks, but then do this only on small screens, with this extended “Custom CSS” code:

@media screen and (max-width: 768px) {
  .tablepress-id-1 {
    white-space: nowrap;
  }
}

Regards,
Tobias

Hi Tobias. I instanlled the extension and updated the shortcode, disabling the datatables check box but had no luck. It just wouldn’t scroll even though i used
[table id=1 responsive=scroll /]

I then tried your second method which worked, however it had the opposite effect. The columns were extremely wide because there was no set width.

I appreciate your help! If you can’t figure out any way around, that’s ok. I am grateful for your help so far.

Dave

Hi Dave,

besides modifying the Shortcode, did you download, install, and activate the TablePress Responsive Tables Extension as a plugin on your site?

Once we get that to work, a different CSS approach could be

.tablepress-id-1 {
  min-width: 1000px;
}

Regards,
Tobias