JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://flesler-plugins.googlecode.com/files/jquery.scrollTo-1.4.3.1-min.js"></script>
<table>
  <thead>
    <tr>
      <th>Title 1</th>
      <th>Title 2</th>
      <th>Title 3</th>
      <th>Title 4</th>
      <th>Title 5</th>
      <th>Title 6</th>
      <th>Title 7</th>
      <th>Title 8</th>
    </tr>
  </thead>
  <tbody id="snaptocolumn">
    <tr>
      <td>Column 1</td>
      <td>fake data qwerty asdf lorem ipsum</td>
      <td>fake data qwerty asdf lorem ipsum</td>
      <td>fake data qwerty asdf lorem ipsum</td>
      <td>fake data qwerty asdf lorem ipsum</td>
      <td>fake data qwerty asdf lorem ipsum</td>
      <td>fake data qwerty asdf lorem ipsum</td>
      <td>fake data qwerty asdf lorem ipsum</td>
    </tr>
    <tr>
      <td>Column 2</td>
      <td>fake data qwerty asdf lorem ipsum</td>
      <td>fake data qwerty asdf lorem ipsum</td>
      <td>fake data qwerty asdf lorem ipsum</td>
      <td>fake data qwerty asdf lorem ipsum</td>
      <td>fake data qwerty asdf lorem ipsum</td>
      <td>fake data qwerty asdf lorem ipsum</td>
      <td>fake data qwerty asdf lorem ipsum</td>
    </tr>
    <tr>
      <td>Column 3</td>
      <td>fake data qwerty asdf lorem ipsum</td>
      <td>fake data qwerty asdf lorem ipsum</td>
      <td>fake data qwerty asdf lorem ipsum</td>
      <td>fake data qwerty asdf lorem ipsum</td>
      <td>fake data qwerty asdf lorem ipsum</td>
      <td>fake data qwerty asdf lorem ipsum</td>
      <td>fake data qwerty asdf lorem ipsum</td>
    </tr>
    <tr>
      <td>Column 4</td>
      <td>fake data qwerty asdf lorem ipsum</td>
      <td>fake data qwerty asdf lorem ipsum</td>
      <td>fake data qwerty asdf lorem ipsum</td>
      <td>fake data qwerty asdf lorem ipsum</td>
      <td>fake data qwerty asdf lorem ipsum</td>
      <td>fake data qwerty asdf lorem ipsum</td>
      <td>fake data qwerty asdf lorem ipsum</td>
    </tr>
    <tr>
      <td>Column 5</td>
      <td>fake data qwerty asdf lorem ipsum</td>
     ...

CSS

table {
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
}

td, th {
  background: #ddd;
  padding: 5px 10px;
  border-top: 1px solid #aaa;
  border-left: 1px solid #aaa;
}

th {
  background: #cfc;
}

td:first-child {
  background: #fcc;
}

@media only screen and (max-width: 768px) {

  table {
    display:block;
    width: 100%;
  }

  thead {
    float: left;
  }

  tbody {
    display: block;
    width: auto;
    position: relative;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }

  tr {
    display: block;
  }

  th {
    display: block;
  }

  tr {
    display: inline-block;
    vertical-align: top;
  }

  tr:not(:first-child) {
    margin-left: -4px; /* Magic Number? */
  }

  td {
    display: block;
    min-height: 1.25em;
    border-top: 0;
    border-top: 1px solid #aaa;
  }
}

JavaScript

$(function() {

  $('#snaptocolumn').scroll(function() {

    var pos = new Array();
    $('#snaptocolumn').children('tr').each(function() {
      pos.push($(this).position()['left']);
    });

    var closest = Math.abs(pos[0]);
    for (var i = pos.length - 1; i >= 0; i--) {
      if (Math.abs(pos[i]) < closest) {
        closest = pos[i];
      }
    };

    $('#scroll-cur-pos').text($(this).scrollLeft());
    $('#scroll-clo-pos').text(closest);

    clearTimeout($.data(this, 'scrollTimer'));
    $.data(this, 'scrollTimer', setTimeout(function() {
      $('#snaptocolumn').scrollTo($('#snaptocolumn').scrollLeft()+closest, {duration:'fast'});
    }, 250));

  });

});