你可以用多种方法来实现这一点：在一个使用溢出的div中移动表，在表中添加和删除数据，或者我选择的方法，显示和隐藏特定的列。

HTML格式

<div class="ui-widget">
  <table id="table-1" class="datatable">
    <tbody></tbody>
  </table>
  <div id="slider"></div>
</div>

字符串

CSS

.datatable {
  border-collapse: collapse;
  margin: .5em 1em;
}

.datatable tbody {
  font-family: Arial, sans-serif;
}

.datatable tbody tr td {
  border: 1px solid #ccc;
  padding: .2em .4em;
}

td.hide {
  display: none;
}

#slider {
  width: 280px;
  margin: 0 1em;
}

型

JavaScript

var tData = [
  ["R1C1", "R1C2", "R1C3", "R1C4", "R1C5", "R1C6", "R1C7", "R1C8", "R1C9"],
  ["R2C1", "R2C2", "R2C3", "R2C4", "R2C5", "R2C6", "R2C7", "R2C8", "R2C9"],
  ["R3C1", "R3C2", "R3C3", "R3C4", "R3C5", "R3C6", "R3C7", "R3C8", "R3C9"],
  ["R4C1", "R4C2", "R4C3", "R4C4", "R4C5", "R4C6", "R4C7", "R4C8", "R4C9"],
  ["R5C1", "R5C2", "R5C3", "R5C4", "R5C5", "R5C6", "R5C7", "R5C8", "R5C9"]
];

$(function() {
  var $t = $("#table-1");
  var maxCol = 5;
  var cell = 0;
  // Populate the table
  $.each(tData, function(k1, v1) {
    // Create Rows
    var $row = $("<tr>", {
      id: "row-" + (k1 + 1),
      class: "row"
    });
    $.each(v1, function(k2, v2) {
      if (k2 < maxCol) {
        $("<td>", {
          class: "show col col-" + (k2 + 1),
          id: "cell-" + cell++
        }).html(v2).appendTo($row);
      } else {
        $("<td>", {
          class: "hide col col-" + (k2 + 1),
          id: "cell-" + cell++
        }).html(v2).appendTo($row);
      }
    });
    $row.appendTo($t);
  });

  $("#slider").slider({
    min: 0,
    max: tData[0].length - maxCol,
    value: 0,
    slide: function(e, ui) {
      var i = ui.value + 1;
      var m = ui.value + maxCol;
      // Hide all
      $(".show").toggleClass("show hide");
      // Show just specific columns based on slider value
      for (i; i <= m; i++) {
        $(".col-" + i).removeClass("hide").addClass("show");
      }
    }
  });
});

型
工作示例：https://jsfiddle.net/Twisty/3osy7fvh/