JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdn.datatables.net/v/dt/dt-1.10.16/datatables.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/v/dt/dt-1.10.16/datatables.min.js"></script>
<!DOCTYPE html>

<body>
  <div class="container">
    <nav class="navbar navbar-toggleable-md navbar-light bg-faded">
      <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <a class="navbar-brand" href="#">Navbar</a>

      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav mr-auto">
          <li class="nav-item active">
            <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
          </li>
          <li class="nav-item active">
            <a class="nav-link" href="#">Link</a>
          </li>
        </ul>
      </div>
    </nav>

    <h1>FLEXIBLE SIZES work a bit now</h1>


    <table id="example" class="display">
      <thead>
        <tr>
          <th>Name</th>
          <th>Position</th>
          <th>Office</th>
          <th>Age</th>
          <th>Start date</th>
          <th>Salary</th>
          <th>Salary1</th>
          <th>Salary2</th>
          <th>Salary3</th>
          <th>Salary4</th>
          <th>Salary5</th>
          <th>Salary6</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Tiger Nixon</td>
          <td>System Architect</td>
          <td>Edinburgh</td>
   ...

CSS

table {
  table-layout: fixed
}

th {
  white-space: nowrap;
}

tr {
  white-space: nowrap;
}

td {
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: left;
}

td:hover {
  overflow: visible;
  white-space: normal;
  height: auto;
}
table.dataTable thead th,
table.dataTable thead td {
  padding: 10px 0px;
  border-bottom: 1px solid #111;
}

table.dataTable.compact thead th,
table.dataTable.compact thead td {
  padding: 10px 0px;
}

JavaScript

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

  $(document).ready(function() {
        $('#example2').DataTable({
          "columnDefs": [
        { "width": "50px", "targets": [5,6,7,8,9,10,11] },
        { "width": "100px", "targets": [1,2,3] },
        { "width": "150px", "targets": [0,4] }

        ]
        });
      });