JSFiddle - React, Tailwind, and code Playground

HTML

<table>
    <tr>
        <td class="w1">td width: 50% &ndash; ignored</td>
    </tr>
    <tr>
        <td class="w2">td width: 250px &ndash; ignored</td>
    </tr>
    <tr>
        <td class="w3">td width: 100px &ndash; ignored</td>
    </tr>
     <tr>
         <td class="w4">td width: 30em &ndash; ignored</td>
    </tr>
</table>

CSS

table {
    width: 75%;
    height: 400px;
    border-spacing: 10px;
    border: 3px solid black;
    background-color: cornsilk;
}

td {
    border: 2px dashed red;
    text-align: center;
}

td.w1 { width: 50% !important; }
td.w2 { width: 250px !important; }
td.w3 { width: 100px !important; }
td.w4 { width: 30em !important; }