添加按钮以水平滚动表格？答案

【问题标题】：Add button to scroll table horizontally?添加按钮以水平滚动表格？
【发布时间】：2019-09-11 22:52:17
【问题描述】：

我有一个引导表，其容器内的溢出设置为自动，并且第一列被锁定。出现一个水平滚动条以查看其他数据，但我也想添加一个按钮。访问者可以使用鼠标、滚动条或按钮在表格中水平导航。

我将如何构建它？

我可以让我的代码使用 div (https://codepen.io/gregbarbosa/pen/axjKbL)，但不能使用表格 (https://codepen.io/gregbarbosa/pen/eojbrJ)。我唯一的猜测是 JS 动画不适用于表格？

$("#right-button").click(function() {
  event.preventDefault();
  $("#content").animate(
    {
      scrollLeft: "+=300px"
    },
    "slow"
  );
});

$("#left-button").click(function() {
  event.preventDefault();
  $("#content").animate(
    {
      scrollLeft: "-=300px"
    },
    "slow"
  );
});

【问题讨论】：

嘿格雷格。 StackOverflow 并不是真正的“一般建议”或教程网站。如果您编写了试图实现目标的代码，您可以分享它，我们可以帮助您调试它。然而，就目前的形式而言，这个问题太宽泛了。如需参考，请查看What topics can I ask about here?。
@TylerRoper 对不起 Tyler，现在添加示例。

标签： javascript html css bootstrap-4

【解决方案1】：

目标.table-responsive 而不是#content。

$("#right-button").click(function() {
  event.preventDefault();
  $(".table-responsive").animate(
    {
      scrollLeft: "+=300px"
    },
    "slow"
  );
});

$("#left-button").click(function() {
  event.preventDefault();
  $(".table-responsive").animate(
    {
      scrollLeft: "-=300px"
    },
    "slow"
  );
});

这是updated CodePen。

【讨论】：

谢谢@bfl。这是我的问题的确切解决方案。