JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css">
<script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container">
  <table id="example" class="table" width="100%">
        <thead>
        </thead>
        <tbody>
            <tr>
                <td>Tiger Nixon</td>
                <td>System Architect</td>
                <td>Edinburgh</td>
                <td>61</td>
                <td>2011/04/25</td>
                <td>$320,800</td>
                 <td>$320,800</td>
                 <td>$320,800</td>
                 <td>$320,800</td>
                 <td>$320,800</td>
                 <td>$320,800</td>
                 <td>$320,800</td>
            </tr>
            <tr>
                <td>Garrett Winters</td>
                <td>Accountant</td>
                <td>Tokyo</td>
                <td>63</td>
                <td>2011/07/25</td>
                <td>$170,750</td>
                <td>$320,800</td>
                 <td>$320,800</td>
                 <td>$320,800</td>
                 <td>$320,800</td>
                 <td>$320,800</td>
                 <td>$320,800</td>
            </tr>
            <tr>
                <td>Ashton Cox</td>
                <td>Junior Technical Author</td>
                <td>San Francisco</td>
                <td>66</td>
                <td>2009/01/12</td>
                <td>$86,000</td>
                <td>$320,800</td>
                 <td>$320,800</td>
                 <td>$320,800</td>
                 <td>$320,800</td>
                 <td>$320,800</td>
                 <td>$320,800</td>
            </tr>
            <tr>
                <td>Cedric Kelly</td>
                <td>Senior Javascript Developer</td>
                <td>Edinburgh</td>
                <td>22</td>
                <td>2012/03/29</td>
           ...

CSS

.container {
  position: relative;
}

table {
  width: 100%;
  position: relative;
  white-space: nowrap;
}

.table > thead > tr > th 
{
  background-color: #f5f5f5;
  text-align: center; 
  vertical-align: middle;
}

td {
  text-align: center; 
  vertical-align: middle;
}

.dataTables_wrapper {
    position: relative;
    float: left;
}
.dataTables_paginate {
    margin-top: 10px;
    position: absolute;
    text-align: right;
    right: 0%;
    white-space: nowrap;
}
.dataTables_info {
    margin-top: 10px;
    position: absolute;
    text-align: right;
    padding-right: 20px;
    white-space: nowrap;
}

.btn-group {
  position: absolute;
  left: 50%;
  transform: translateY(100%);
  bottom: 0;
  overflow: none;
  white-space: nowrap;
}

.btn {
 margin-top: 15px;
 overflow: none;
 white-space: nowrap;
}
.btn-default {
   overflow: none;
 white-space: nowrap;
}

JavaScript

$(document).ready(function() {
    $('#example').DataTable(
    {
      "columnDefs": [
        { "targets": 0, "title": "0"},
        { "targets": 1, "title": "1", },
        { "targets": 2, "title": "2",  },
        { "targets": 3, "title": "3",  },
        { "targets": 4, "title": "4",  },
        { "targets": 5, "title": "5",  },
        { "targets": 6, "title": "6", },
        { "targets": 7, "title": "7", },
        { "targets": 8, "title": "8", },
        { "targets": 9, "title": "9", },
        { "targets": 10, "title": "10", },
        { "targets": 11, "title": "11", },
      ],
      "pagingType": "simple",
      "autoWidth": false,
    });  
});