title: Drag table (or other content) horizontally in scrollable div
body: <p>I have a rather large table that sits in a fixed div, set to overflow. This adds a horizontal scrollbar which is fine, but I'd like to be able to drag my table within the scrollable div, so basically not just relying on the scrollbar to scroll the table.</p>
  
  <p>My (sample) code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.box {
    overflow-x: auto;
    overflow-y: hidden;
    width: 500px;
  }
  table {
    width: 100%;
  }
  table td,
  table th {
    padding: 5px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="box"&gt;
    &lt;table&gt;
      &lt;thead&gt;
        &lt;tr&gt;
          &lt;th&gt;Column1&lt;/th&gt;
          &lt;th&gt;Column2&lt;/th&gt;
          &lt;th&gt;Column3&lt;/th&gt;
          &lt;th&gt;Column4&lt;/th&gt;
          &lt;th&gt;Column5&lt;/th&gt;
          &lt;th&gt;Column6&lt;/th&gt;
          &lt;th&gt;Column7&lt;/th&gt;
          &lt;th&gt;Column8&lt;/th&gt;
          &lt;th&gt;Column9&lt;/th&gt;
          &lt;th&gt;Column10&lt;/th&gt;
          &lt;th&gt;Column11&lt;/th&gt;
          &lt;th&gt;Column12&lt;/th&gt;
        &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
        &lt;tr&gt;
          &lt;td&gt;Lorem ipsum dolor sit amet bla bla etc&lt;/td&gt;
          &lt;td&gt;Lorem ipsum dolor sit amet bla bla etc&lt;/td&gt;
          &lt;td&gt;Lorem ipsum dolor sit amet bla bla etc&lt;/td&gt;
          &lt;td&gt;Lorem ipsum dolor sit amet bla bla etc&lt;/td&gt;
          &lt;td&gt;Lorem ipsum dolor sit amet bla bla etc&lt;/td&gt;
          &lt;td&gt;Lorem ipsum dolor sit amet bla bla etc&lt;/td&gt;
          &lt;td&gt;Lorem ipsum dolor sit amet bla bla etc&lt;/td&gt;
          &lt;td&gt;Lorem ipsum dolor sit amet bla bla etc&lt;/td&gt;
          &lt;td&gt;Lorem ipsum dolor sit amet bla bla etc&lt;/td&gt;
          &lt;td&gt;Lorem ipsum dolor sit amet bla bla etc&lt;/td&gt;
          &lt;td&gt;Lorem ipsum dolor sit amet bla bla etc&lt;/td&gt;
          &lt;td&gt;Lorem ipsum dolor sit amet bla bla etc&lt;/td&gt;
        &lt;/tr&gt;
      &lt;/tbody&gt;
    &lt;/table&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I have tried jquery draggable but that doesn't get the same result. Any ideas as to how to achieve this, either with css or jquery? Ideally I'd like to do this with css only but I am not sure if this is possible. The content needs to be draggable horizontally only.</p>
  
  <p><strong>Fiddle: <a href="https://jsfiddle.net/41gv8y77/" rel="nofollow">https://jsfiddle.net/41gv8y77/</a></strong></p>