Big problems with with horizontal scrolling and responsive

Hi Paul,

thanks for your post, and sorry for the trouble.

(For your last question: Yes, as these are the English language forums, English is preferred, so that more people can benefit from the discussion.)

I can confirm that the Horizontal Scrolling is not working here, but I don’t really see why. For some reason the table is switching to the “fixed” layout mode, so that all columns are very narrow with word-wrapping happening inside of words.
Instead of using the “Horizontal Scrolling” checkbox, I’d therefore suggest to switch to a different type of horizontal scrolling:
For that, please uncheck the “Horizontal Scrolling” checkbox and add this “Custom CSS” (on the “Plugin Options” screen) instead:

#tablepress-1_wrapper {
  overflow-x: auto;
  overflow-y: hidden;
}

For the Responsive Tables Extension: As that’s incompatible with the “Horizontal Scrolling”, I suggest to try that again after turning off “Horizontal Scrolling” as well (so that the header row will not be separate from the table body anymore).
It will then still show the text in one line though, which you can however change by adding this “Custom CSS”:

.tablepress-id-1 tbody {
  white-space: normal !important;
}

For a better layout, you might then however have to manually set the row heights (not the column widths), due to how the table scrolling works technically. (It’s not really that nice for tables where the text is in multiple lines, which is why the default is to put everything in one line.)

So, in summary, for this table, the best approach might be to use the first suggestion from above, with the alternative horizontal scrolling method. That will also work in responsive mode, so that you don’t actually have to use the Responsive Tables Extension.

Regards,
Tobias

Hey Tobias,

I’ve unchecked the “Horizontal Scrolling” checkbox and added the custom CSS, but scrolling still doesn’t work in chrome.

Any idea?

Thank you.

Regards,
Paul

Hi Paul,

ah, found it. We’ll need another piece of CSS code. Please also add

.tablepress {
  word-break: normal;
}

Regards,
Tobias

Hey Tobias,

thanks for your help. Seems to work fine now! ??

Can you tell me how I can remove the “back/forward”-text (screenshot: https://dl.dropboxusercontent.com/u/41089257/Unbenannt.PNG )?

It would be great, if these buttons are only visible when there is actually more than one page.

Regards,

Paul

Hi Paul,

good to hear that this worked! To remove “Back/Forward”, just uncheck the “Pagination” checkbox on the “Edit” screen of the table.

Regards,
Tobias