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

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

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 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