JSFiddle - React, Tailwind, and code Playground

by willemvb

HTML

<div class=wrap>
  <table>
    <thead>
      <th>Small</th>
      <th>
        <div class="large">Large</div>
      </th>
      <th>Smallish</th>
      <th>Smalloid</th>
      <th>Small one</th>
    </thead>
    <tbody>
      <td>0</td>
      <td>Larger content in cell, too large maybe?</td>
      <td>12</td>
      <td>34</td>
      <td>56</td>
    </tbody>
  </table>
</div>

CSS

* {
  font-family: sans-serif;
}

.wrap {
  width: 200px;
  overflow-x: auto;
  background: #f0f0f0;
  padding: 25px;
}

table {
  border-collapse: collapse;
  background-color: #fff;
}

th {
  white-space: nowrap;
  text-align: left;
  border: solid 1px #ccc;
  padding: 5px;
}

td {
  border: solid 1px #ccc;
  padding: 5px;
}

.large {
  width: 200px;
}