JSFiddle - React, Tailwind, and code Playground

by TimGThomas

HTML

<h1>Automatic Layout</h1>

<table class="auto">
    <thead>
        <tr>
            <th contenteditable>Column One</th>
            <th contenteditable>Two</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td contenteditable>'Auto' layout. (Click to type)</td>
            <td contenteditable>Two</td>
        </tr>
    </tbody>
</table>

<h1>Fixed Layout</h1>

<table class="fixed">
    <thead>
        <tr>
            <th contenteditable>Column One</th>
            <th contenteditable>Two</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td contenteditable>'Fixed' layout. (Click to type)</td>
            <td contenteditable>Two</td>
        </tr>
    </tbody>
</table>

CSS

body {
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    font-size: 0.9em;
}

h1 {
    font-size: 1.1em;
    font-weight: bold;
    margin-bottom: 0.5em;
}

table {
    margin-bottom: 1.5em;
    width: 70%;
}

table, th, td { border: 1px solid #ccc; }

th, td { padding: 4px; }

th { background: #eee; font-weight: bold; }

.auto { table-layout: auto; }
.fixed { table-layout: fixed; }