JSFiddle - React, Tailwind, and code Playground

by agib

HTML

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js"></script>
<main x-data="{ fontSize: 12 }">
<div >
<label for="fontSize">Font size:</label>
<input type="range" name="" x-model="fontSize" id="fontSize" min="10" max="56">
</div>
<div x-text="fontSize"></div>
<div x-bind:style="`font-size: ${fontSize}px`">




<h2>Table layout fixed</h2>
<table class="table-fixed">
  <tbody>
    <tr>
      <td class="nowrap">Cell 1</td>
      <td>Cell 2</td>
      <td>Cell 3</td>
      <td>Cell 4</td>
    </tr>
    <tr>
      <td>Cell 1</td>
      <td>Cell 2</td>
      <td>Cell 3</td>
      <td>Cell 4</td>
    </tr>
  </tbody>
</table>

<h2>Table layout NOT fixed</h2>
<table>
  <tbody>
    <tr>
      <td class="nowrap">Cell 1</td>
      <td>Cell 2</td>
      <td>Cell 3</td>
      <td>Cell 4</td>
    </tr>
    <tr>
      <td>Cell 1</td>
      <td>Cell 2</td>
      <td>Cell 3</td>
      <td>Cell 4</td>
    </tr>
  </tbody>
</table>
</div>
</main>

CSS

table {
  width: 100%;
  border-collapse: collapse;
}

.table-fixed {
  table-layout: fixed;
}
td {
  border: 1px solid dodgerblue;
}

td:first-child {
  width: 1px;
}

.nowrap {
    white-space: nowrap;
}