title: Add button to scroll table horizontally?
body: <p>I have a bootstrap table with overflow set to auto inside it's container, and a locked first column. A horizontal scroll bar appears to see additional data, but I'd like to add a button too. The visitor would be able to use their mouse, the scrollbar, or the buttons, to navigate horizontally in the table.</p>
  
  <p>How would I go about building this out?</p>
  
  <p>I can get my code working with a div (<a href="https://codepen.io/gregbarbosa/pen/axjKbL" rel="nofollow noreferrer">https://codepen.io/gregbarbosa/pen/axjKbL</a>), but not the table (<a href="https://codepen.io/gregbarbosa/pen/eojbrJ" rel="nofollow noreferrer">https://codepen.io/gregbarbosa/pen/eojbrJ</a>). My only guess is that the JS animate doesn't apply to tables? </p>
  
  <pre><code>$("#right-button").click(function() {
    event.preventDefault();
    $("#content").animate(
      {
        scrollLeft: "+=300px"
      },
      "slow"
    );
  });
  
  $("#left-button").click(function() {
    event.preventDefault();
    $("#content").animate(
      {
        scrollLeft: "-=300px"
      },
      "slow"
    );
  });
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/trvrf.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/trvrf.png" alt="screenshot of table"></a></p>