JSFiddle - React, Tailwind, and code Playground

by Wei Lin Chen

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<h3>Regular Table</h3>

<table class="table table-bordered">
  <tr>
    <td>Key</td>
    <td>Value</td>
  </tr>
  <tr>
    <td>Key</td>
    <td>Value</td>
  </tr>  
</table>

<h3>Compact Table</h3>

<table class="table table-bordered">
  <tr>
    <th class="fit">Key</th>
    <td>Value</td>
  </tr>
  <tr>
    <th  class="fit">Key</th>
    <td>Value</td>
  </tr>  
</table>

CSS

.table th.fit {
    white-space: nowrap;
    width: 10%;
}