DataTables

DataTables scroll

HTML

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://cdn.datatables.net/1.10.10/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.10/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/fixedcolumns/3.2.0/css/fixedColumns.dataTables.min.css">
<script src="https://nightly.datatables.net/fixedcolumns/js/dataTables.fixedColumns.min.js"></script>
<title>
  Scrolling and fixed</title>




<body>
  <div style="background:white">

<table cellpadding="0" cellspacing="0" border="0" class="dataTable" id="example">
      <thead>
        <tr>
          <th>fixed column</th>
          <th>Browser</th>
          <th>Platform(s)</th>
          <th>Engine version</th>
          <th>CSS grade</th>
          <th>Browser</th>
          <th>Platform(s)</th>
          <th>Engine version</th>
          <th>CSS grade</th>
          <th>Browser</th>
          <th>Platform(s)</th>
          <th>Engine version</th>
          <th>CSS grade</th>
          <th>Browser</th>
          <th>Platform(s)</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td style="background-color:red;">we got some text to show here with spaces and more</td>
          <td>Internet Explorer 4.0</td>
          <td>Win 95+</td>
          <td> 4</td>
          <td>X</td>
          <td>Trident</td>
          <td>Internet Explorer 4.0</td>
          <td>Win 95+</td>
          <td> 4</td>
          <td>X</td>
          <td>Trident</td>
          <td>Internet Explorer 4.0</td>
          <td>Win 95+</td>
          <td>4</td>
          <td>X</td>
        </tr>
        <tr>
          <td>we got some text to show here</td>
          <td>Internet Explorer 4.0</td>
          <td>Win 95+</td>
          <td> 4</td>
          <td>X</td>
          <td>Trident</td>
          <td>Internet Explorer 4.0</td>
          <td>Win 95+</td>
          <td> 4</td>
          <td>X</td>
         ...

CSS

div:not(.dataTables_scrollFoot)::-webkit-scrollbar { 
  display: none; 
}

JavaScript

$(function() {
		  $('#example').DataTable({		    
        "fnInitComplete": function () {
                    // Disable scrolling in Head
                    $('.dataTables_scrollHead').css({
                        'overflow-y': 'hidden !important'
                    });
 //  Sync TFOOT scrolling with TBODY
                    $('.dataTables_scrollFoot').on('scroll', function () {
                        $('.dataTables_scrollBody').scrollLeft($(this).scrollLeft());
                    });
                    
                },
		   		   
		  });
		});