Hi,
thanks for your post, and sorry for the trouble.
Indeed, at this time, the stack mode of the Responsive Tables Extension does not support the header cell content to be shown.
This will however be possible with a fully enhanced version of Responsive Tables that will be coming shortly as part of a premium module for TablePress 2.0 (see https://tablepress.org/8-million-downloads-tablepress-2-0/ for an early announcement).
Regards,
Tobias
OK, thanks.
if I use the scroll option, is there option to always show the scroll and control it appearance?
Hi,
unfortunately, there’s no direct setting to make the scrollbar always visible, as that depends on the operating system. For example, Mac OS, iOS, and Android will hide it by default.
However, there’s a way to make it look like there’s a scrollbar, with some CSS code, see https://css-tricks.com/the-current-state-of-styling-scrollbars-in-css/
In the case of the horizontal scrolling, you could try adding this to the “Custom CSS” textarea on the “Plugin Options” screen of TablePress:
.tablepress-scroll-wrapper {
--scrollbar-foreground: #999999;
--scrollbar-background: #333333;
/* Foreground, Background */
scrollbar-color: var(--scrollbar-foreground) var(--scrollbar-background);
}
.tablepress-scroll-wrapper::-webkit-scrollbar {
width: 10px; /* Mostly for vertical scrollbars */
height: 10px; /* Mostly for horizontal scrollbars */
}
.tablepress-scroll-wrapper::-webkit-scrollbar-thumb { /* Foreground */
background: var(--scrollbar-foreground);
}
.tablepress-scroll-wrapper::-webkit-scrollbar-track { /* Background */
background: var(--scrollbar-background);
}
Regards,
Tobias
Thanks, I show some example like this, will this apply only to the table and work on all devices?
Hi,
yes, this particular CSS code will only apply to tables that use the scroll mode.
From what I know, this should work on all modern browsers on all devices, see https://css-tricks.com/the-current-state-of-styling-scrollbars-in-css/
Regards,
Tobias
