Sure. Try this CSS:
<style>
.sticky-list-wrapper {
overflow: scroll;
}
table.sticky-list {
table-layout: auto;
}
</style>
Ok so putting that in my child’s class.css had the effect of putting the scroll bars on the right side and the bottom of all the tables while in desktop mode – but for responsive mode on my phone it did nothing.
I investigated my theme and found a responsive.css file that specifically called out different screen sizes and retina displays.
I ended up using the following code in my child class.css and now the tables are all scrollable just for mobile users!
Thanks for the help getting me started fried-eggz, love your plugin!
/* Prevents Sticky List from extending past the right margin */
@media only screen and (min-width: 1440px) {
.sticky-list-wrapper {
overflow: scroll !important;
}
table.sticky-list {
table-layout: auto !important;
}
}
@media only screen and (min-width: 1025px) {
.sticky-list-wrapper {
overflow: scroll !important;
}
table.sticky-list {
table-layout: auto !important;
}
}
@media only screen and (min-width: 1024px) {
.sticky-list-wrapper {
overflow: scroll !important;
}
table.sticky-list {
table-layout: auto !important;
}
}
@media only screen and (min-width: 950px) {
.sticky-list-wrapper {
overflow: scroll !important;
}
table.sticky-list {
table-layout: auto !important;
}
}
@media only screen and (min-width: 767px) {
.sticky-list-wrapper {
overflow: scroll !important;
}
table.sticky-list {
table-layout: auto !important;
}
}
@media only screen and (min-width: 600px) {
.sticky-list-wrapper {
overflow: scroll !important;
}
table.sticky-list {
table-layout: auto !important;
}
}
@media only screen and (min-width: 540px) {
.sticky-list-wrapper {
overflow: scroll !important;
}
table.sticky-list {
table-layout: auto !important;
}
}
@media only screen and (min-width: 320px) {
.sticky-list-wrapper {
overflow: scroll !important;
}
table.sticky-list {
table-layout: auto !important;
}
}
@media only screen and (-Webkit-min-device-pixel-ratio: 1.5),
only screen and (-moz-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (min-device-pixel-ratio: 1.5) {
.sticky-list-wrapper {
overflow: scroll !important;
}
table.sticky-list {
table-layout: auto !important;
}
}
