JSFiddle - React, Tailwind, and code Playground

by Arnold Daniels

HTML

<table class="fixed-table" border="1">
    <tr>
        <th class="cw5">Column1</th>
        <th class="cw2">Col 2</th>
        <th class="cw2">Column3</th>
        <th class="cw1">Col 4</th>
        <th class="cw4">Column5</th>
    </tr>
</table>

CSS

table {
    border-spacing: 0;
    border-collapse: collapse;
}

.fixed-table {
  table-layout: fixed;
  width: 100%;
}

.fixed-table .cw1 { width: 1px; }
.fixed-table .cw2 { width: 2px; }
.fixed-table .cw3 { width: 3px; }
.fixed-table .cw4 { width: 4px; }
.fixed-table .cw5 { width: 5px; }
.fixed-table .cw6 { width: 6px; }
.fixed-table .cw7 { width: 7px; }
.fixed-table .cw8 { width: 8px; }
.fixed-table .cw9 { width: 9px; }
.fixed-table .cw10 { width: 10px; }
.fixed-table .cw11 { width: 11px; }
.fixed-table .cw12 { width: 12px; }