JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://www.datatables.net/download/build/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="http://www.datatables.net/release-datatables/media/css/demo_table.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.11/css/jquery.dataTables.min.css">
<table id="example">
  <thead>
  <tr>
  <th>Rendering engine</th>
  <th>Browser</th>
  <th>Platform(s)</th>
  <th>Engine version</th>
  <th>CSS grade</th>
  </tr>
  </thead>
  <tfoot>
  <tr>
  <th>Rendering engine</th>
  <th>Browser</th>
  <th>Platform(s)</th>
  <th>Engine version</th>
  <th>CSS grade</th>
  </tr>
  </tfoot>
  <tbody>
  <tr>
    <td>Trident</td>
    <td>Internet Explorer 4.0</td>
    <td>Win 95+</td>
    <td>4</td>
    <td>X</td>
  </tr>
  <tr>
    <td>Other browsers</td>
    <td>All others</td>
    <td>-</td>
    <td>-</td>
    <td>U</td>
  </tr>
  </tbody>
</table>

CSS

th, td { 
    white-space: nowrap;
}

div.dataTables_wrapper {
        width: 80%;
        margin: 0 auto;
    }

JavaScript

$(document).ready(function() {

  $('#example').dataTable( {
    "sScrollX": "100%",
    "scrollX": true
    } );
} );