JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.10/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/fixedcolumns/3.2.0/js/dataTables.fixedColumns.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">
<div style="height:300px; border: 1px solid black; margin-bottom:30px;">
  <p class="paraContent">
    All your navbar & content goes here
  </p>
  <p class="paraContent">
    This is an example of sticky header with left 2-coloumns fixed and horizontal scroll.
  </p>
  <p>
    Especially this solution fixes the breaking of column & header alignments, and fixes the smooth scrolling on all the devices. (Good to have solution if you want to avoid vertical scrolling of table.)
  </p>
</div>
<table id="example" class="stripe row-border order-column cell-border" cellspacing="0" width="100%">
  <thead>
    <tr>
      <th>First name</th>
      <th>Last name</th>
      <th>Position</th>
      <th>Office</th>
      <th>Age</th>
      <th>Start date</th>
      <th>Salary</th>
      <th>Extn.</th>
      <th>E-mail</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Tiger</td>
      <td>Nixon</td>
      <td>System Architect</td>
      <td>Edinburgh</td>
      <td>61</td>
      <td>2011/04/25</td>
      <td>$320,800</td>
      <td>5421</td>
      <td>[email protected]</td>
    </tr>
    <tr>
      <td>Garrett</td>
      <td>Winters</td>
      <td>Accountant</td>
      <td>Tokyo</td>
      <td>63</td>
      <td>2011/07/25</td>
      <td>$170,750</td>
      <td>8422</td>
      <td>[email protected]</td>
    </tr>
    <tr>
      <td>Ashton</td>
      <td>Cox</td>
      <td>Junior Technical Author</td>
      <td>San Francisco</td>
      <td>66</td>
      <td>2009/01/12</td>
     ...

CSS

th,
td {
  white-space: nowrap;
}

.paraContent {
  font-size: 38px;
  text-align: center;
}

table.DTFC_Cloned thead,
thead {
  background-color: #995c00
}

JavaScript

$(document).ready(function() {
  var table = $('#example').DataTable({
    scrollX: true,
    scrollCollapse: true,
    paging: false,
    fixedColumns: {
      leftColumns: 2
    }
  });


$(function() {
    // Check the initial Poistion of the Sticky Header
 var stickyHeaderTop = $('#example').offset().top;
 $(window).scroll(function() {
if ($(window).scrollTop() > stickyHeaderTop) {
  $('.dataTables_scrollHead, .DTFC_LeftHeadWrapper').css('transform', 'translateY(0%)');
  $('.DTFC_LeftHeadWrapper').css({position: 'fixed',top: '0px',zIndex: '1',left: 'auto'});
  $('.dataTables_scrollHead').css({position: 'fixed',top: '0px', zIndex: '1' });
  $('.DTFC_ScrollWrapper').css({height: ''});
 
 }
 else {
  $('.DTFC_LeftHeadWrapper, .DTFC_LeftHeadWrapper').css({position: 'relative',top: '0px'});
  $('.dataTables_scrollHead').css({position: 'relative', top: '0px'});
  $('.dataTables_scrollHead').css('transform', 'translateY(0%)');
      }

    });
  });
});