JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/4.0.2/bootstrap-material-design.umd.min.js"></script>
<link rel="stylesheet" href="&quot;https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://unpkg.com/bootstrap-material-design@4.1.1/dist/css/bootstrap-material-design.min.css">
<script src="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons"></script>
<table class="table table-sm">
  <thead>
    <tr>
      <th>Fills space</th>
      <th class="min">id</th>
      <th class="min">tiny</th>
      <th>Fills space</th>
      <th class="min">small</th>
      <th>Fills space, wider</th>
      <th>Fills space</th>
      <th class="min">thin</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Fills space</td>
      <td class="min">id</td>
      <td class="min">tiny</td>
      <td>Fills space</td>
      <td class="min">small</td>
      <td>Fills space, wider</td>
      <td>Fills space</td>
      <td class="min">thin</td>
    </tr>
  </tbody>
</table>

CSS

/* see: https://stackoverflow.com/a/26983473 */
table {
  /* override Bootstrap's width */
  width: inherit !important;
}
tr {}
td, th {
  width: auto;
  border: 1px solid #eee;
}
td.min, th.min {
  width: 1% !important;
  white-space: nowrap !important;
}