JSFiddle - React, Tailwind, and code Playground

by dke358

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box drag">
<table>
  <thead>
    <tr>
      <th>Column1</th>
      <th>Column2</th>
      <th>Column3</th>
      <th>Column4</th>
      <th>Column5</th>
      <th>Column6</th>
      <th>Column7</th>
      <th>Column8</th>
      <th>Column9</th>
      <th>Column10</th>
      <th>Column11</th>
      <th>Column12</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Lorem ipsum dolor sit amet bla bla etc</td>
      <td>Lorem ipsum dolor sit amet bla bla etc</td>
      <td>Lorem ipsum dolor sit amet bla bla etc</td>
      <td>Lorem ipsum dolor sit amet bla bla etc</td>
      <td>Lorem ipsum dolor sit amet bla bla etc</td>
      <td>Lorem ipsum dolor sit amet bla bla etc</td>
      <td>Lorem ipsum dolor sit amet bla bla etc</td>
      <td>Lorem ipsum dolor sit amet bla bla etc</td>
      <td>Lorem ipsum dolor sit amet bla bla etc</td>
      <td>Lorem ipsum dolor sit amet bla bla etc</td>
      <td>Lorem ipsum dolor sit amet bla bla etc</td>
      <td>Lorem ipsum dolor sit amet bla bla etc</td>
    </tr>
  </tbody>
</table>
</div>

CSS

*{box-sizing:border-box; -webkit-box-sizing:border-box;}
html, body{height:100%; margin:0; font:16px/20px sans-serif;}

.box {
  overflow-x: auto;
  overflow-y: hidden;
  width: 500px;
  margin:60px;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none; 
  -ms-user-select: none;    
  user-select: none; 
}
table {
  width: 100%;
}
table td,
table th {
  padding: 5px;
}

JavaScript

var mx = 0;

$(".drag").on({
  mousemove: function(e) {
    var mx2 = e.pageX - this.offsetLeft;
    if(mx) this.scrollLeft = this.sx + mx - mx2;
  },
  mousedown: function(e) {
    this.sx = this.scrollLeft;
    mx = e.pageX - this.offsetLeft;
  }
});

$(document).on("mouseup", function(){
  mx = 0;
});