Display Tables in a slider

Here is one way to do it. You should be able to create a simple jQuery and CSS slider to better display the TablePress tables.

Here is a good example of a simple jQuery slider you could use:
https://codepen.io/doodlemarks/pen/aFcly

You would need to add the CSS and jQuery to your site then insert the required HTML elements in your post / page:

For example (CSS and jQuery from here – https://codepen.io/doodlemarks/pen/aFcly):

HTML

<div id="slider">
    <a href="#" class="control_next">></a>
    <a href="#" class="control_prev"><</a>
    <ul>
        <li>[table id=1 /]</li>
        <li>[table id=2 /]</li>
        <li>[table id=3 /]</li>
    </ul>

CSS

#slider {
  position: relative;
  overflow: hidden;
  margin: 20px auto 0 auto;
  border-radius: 4px;
}

#slider ul {
  position: relative;
  margin: 0;
  padding: 0;
  height: 200px;
  list-style: none;
}

#slider ul li {
  position: relative;
  display: block;
  float: left;
  margin: 0;
  padding: 0;
  width: 500px;
  height: 300px;
  background: #ccc;
  text-align: center;
  line-height: 300px;
}

a.control_prev, a.control_next {
    position: absolute;
    top: 40%;
    z-index: 999;
    display: block;
    padding: 4% 3%;
    width: auto;
    height: auto;
    background: #2a2a2a;
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    font-size: 18px;
    opacity: 0.8;
    cursor: pointer;
 }

a.control_prev:hover, a.control_next:hover {
    opacity: 1;
    -webkit-transition: all 0.2s ease;
}

a.control_prev {
    border-radius: 0 2px 2px 0;
}

a.control_next {
    right: 0;
    border-radius: 2px 0 0 2px;
}

.slider_option {
    position: relative;
    margin: 10px auto;
    width: 160px;
    font-size: 18px;
}

jQuery

jQuery(document).ready(function ($) {

    jQuery('#checkbox').change(function(){
    setInterval(function () {
        moveRight();
    }, 3000);
});

var slideCount = jQuery('#slider ul li').length;
var slideWidth = jQuery('#slider ul li').width();
var slideHeight = jQuery('#slider ul li').height();
var sliderUlWidth = slideCount * slideWidth;

jQuery('#slider').css({ width: slideWidth, height: slideHeight });

jQuery('#slider ul').css({ width: sliderUlWidth, marginLeft: - slideWidth });

jQuery('#slider ul li:last-child').prependTo('#slider ul');

function moveLeft() {
    jQuery('#slider ul').animate({
        left: + slideWidth
    }, 200, function () {
        jQuery('#slider ul li:last-child').prependTo('#slider ul');
        jQuery('#slider ul').css('left', '');
    });
};

function moveRight() {
    $('#slider ul').animate({
        left: - slideWidth
    }, 200, function () {
        jQuery('#slider ul li:first-child').appendTo('#slider ul');
        jQuery('#slider ul').css('left', '');
    });
};

jQuery('a.control_prev').click(function () {
    moveLeft();
});

jQuery('a.control_next').click(function () {
    moveRight();
});

});    

The CSS will need to be edited depending on your table sizes, page layout etc. but it should be enough to get you started 🙂