JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
    <table>
        <tr>
            <td>width: 1%</td>
            <td>width: 1%</td>
            <td>width: 1%</td>
        </tr>
    </table>
    <table>
        <tr>
            <td>width: 2%</td>
            <td>width: 2%</td>
            <td>width: 2%</td>
        </tr>
    </table>
    <table>
        <tr>
            <td>width: 3%</td>
            <td>width: 3%</td>
            <td>width: 3%</td>
        </tr>
    </table>
    <table>
        <tr>
            <td>width: 4%</td>
            <td>width: 4%</td>
            <td>width: 4%</td>
        </tr>
    </table>
    <table>
        <tr>
            <td>width: 5%</td>
            <td>width: 5%</td>
            <td>width: 5%</td>
        </tr>
    </table>
    <table>
        <tr>
            <td>width: 6%</td>
            <td>width: 6%</td>
            <td>width: 6%</td>
        </tr>
    </table>
    <table>
        <tr>
            <td>width: 7%</td>
            <td>width: 7%</td>
            <td>width: 7%</td>
        </tr>
    </table>
    <table>
        <tr>
            <td>width: 8%</td>
            <td>width: 8%</td>
            <td>width: 8%</td>
        </tr>
    </table>
    <table>
        <tr>
            <td>width: 9%</td>
            <td>width: 9%</td>
            <td>width: 9%</td>
        </tr>
    </table>
    <table>
        <tr>
            <td>width: 10%</td>
            <td>width: 10%</td>
            <td>width: 10%</td>
        </tr>
    </table>
    <table>
        <tr>
            <td>width: 11%</td>
            <td>width: 11%</td>
            <td>width: 11%</td>
        </tr>
    </table>
    <table>
        <tr>
            <td>width: 12%</td>
            <td>width: 12%</td>
            <td>width: 12%</td>
        </tr>
    </table>
    <table>
        <tr>
            <td>width: 13%</td>
            <td>width: 13%</td>
            <td>width: 13%</td>
        </tr>
    </table>
    <table>
        <tr>
            <td>width: 14%</td>
           ...

CSS

body {
    margin: 0;
}

.container {
    width: 1000px;
}

.t-width {
    width: 20%;
}

td {
    background-color: #ccc;
    white-space: nowrap;
}

table:nth-of-type(1) td:nth-of-type(1){width: 1%;}
table:nth-of-type(2) td:nth-of-type(1){width: 2%;}
table:nth-of-type(3) td:nth-of-type(1){width: 3%;}
table:nth-of-type(4) td:nth-of-type(1){width: 4%;}
table:nth-of-type(5) td:nth-of-type(1){width: 5%;}
table:nth-of-type(6) td:nth-of-type(1){width: 6%;}
table:nth-of-type(7) td:nth-of-type(1){width: 7%;}
table:nth-of-type(8) td:nth-of-type(1){width: 8%;}
table:nth-of-type(9) td:nth-of-type(1){width: 9%;}
table:nth-of-type(10) td:nth-of-type(1){width: 10%;}
table:nth-of-type(11) td:nth-of-type(1){width: 11%;}
table:nth-of-type(12) td:nth-of-type(1){width: 12%;}
table:nth-of-type(13) td:nth-of-type(1){width: 13%;}
table:nth-of-type(14) td:nth-of-type(1){width: 14%;}
table:nth-of-type(15) td:nth-of-type(1){width: 15%;}
table:nth-of-type(16) td:nth-of-type(1){width: 16%;}
table:nth-of-type(17) td:nth-of-type(1){width: 17%;}
table:nth-of-type(18) td:nth-of-type(1){width: 18%;}
table:nth-of-type(19) td:nth-of-type(1){width: 19%;}
table:nth-of-type(20) td:nth-of-type(1){width: 20%;}
table:nth-of-type(21) td:nth-of-type(1){width: 21%;}
table:nth-of-type(22) td:nth-of-type(1){width: 22%;}
table:nth-of-type(23) td:nth-of-type(1){width: 23%;}
table:nth-of-type(24) td:nth-of-type(1){width: 24%;}
table:nth-of-type(25) td:nth-of-type(1){width: 25%;}
table:nth-of-type(26) td:nth-of-type(1){width: 26%;}
table:nth-of-type(27) td:nth-of-type(1){width: 27%;}
table:nth-of-type(28) td:nth-of-type(1){width: 28%;}
table:nth-of-type(29) td:nth-of-type(1){width: 29%;}
table:nth-of-type(30) td:nth-of-type(1){width: 30%;}
table:nth-of-type(31) td:nth-of-type(1){width: 31%;}
table:nth-of-type(32) td:nth-of-type(1){width: 32%;}
table:nth-of-type(33) td:nth-of-type(1){width: 33%;}
table:nth-of-type(34) td:nth-of-type(1){width: 34%;}
table:nth-of-type(35) td:nth-of-type(1){width:...