Добавить кнопку для прокрутки таблицы по горизонтали?

Question

У меня есть таблица начальной загрузки с переполнением, установленным на auto внутри контейнера, и заблокированный первый столбец. Появляется горизонтальная полоса прокрутки для просмотра дополнительных данных, но я бы тоже хотел добавить кнопку. Посетитель сможет использовать мышь, полосу прокрутки или кнопки для горизонтальной навигации в таблице.

Как бы я это сделал?

Я могу заставить мой код работать с 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"
  );
});

Answer 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"
  );
});

Вот обновленный CodePen .