JSFiddle - React, Tailwind, and code Playground

by buithehoa

HTML

<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<div class="col-md-6 con">
  <div class="prev pull-left">
    <a class="next">
     Prev
    </a>
  </div>
  <div class="prev pull-right">
   <a class="next">
     Next
   </a>
  </div>
<div class="col-md-6 table-responsive">
  <table class="table">
    <tr>
      <td>
        Helo
      </td> 
      <td>
        Helo
      </td> 
      <td>
        Helo
      </td> 
      <td>
        Helo
      </td> 
      <td>
        Helo
      </td> 
      <td>
        Helo
      </td> 
      <td>
        Helo
      </td> 
      <td>
        Helo
      </td> 
      <td>
        Helo
      </td> 
      <td>
        Helo
      </td> 
      <td>
        Helo
      </td> 
      <td>
        Helo
      </td> 
      <td>
        Helo
      </td> 
      <td>
        Helo
      </td> 
      <td>
        Helo
      </td> 
      <td>
        Helo
      </td> 
      <td>
        Helo
      </td> 
      <td>
        Helo
      </td> <td>
        Helo
      </td> <td>
        Helo
      </td> 
      <td>
        Helo
      </td> 
      <td>
        Helo
      </td> 
      <td>
        Helo
      </td> 
      <td>
        Helo
      </td> 
      <td>
        Helo
      </td> 
      <td>
        Helo
      </td> 
    </tr>
  </table>
</div>

CSS

a{font-size:16px; cursor:pointer;}
.con{margin-top:20px;}

JavaScript

var offset = 0;

$('.prev.pull-right .next').click(function() {
	var tableWidth = $('.col-md-6.table-responsive').width();
  if (offset < tableWidth) {
    offset = offset + 200;
    $('.col-md-6.table-responsive').scrollLeft(offset);
  }
});

$('.prev.pull-left .next').click(function() {
	offset = offset - 200;
  if (offset < 0) {
  	offset = 0;
  }
	$('.col-md-6.table-responsive').scrollLeft(offset);
});