JSFiddle - React, Tailwind, and code Playground

by Pasit R

HTML

<h2>Non-ColGroup</h2>

<table>
    <tr>
        <td>
            <div>Baz</div>
        </td>
        <td>
            <div style="width: 150px;max-width:150px;min-width:150px;">Foo</div>
        </td>
        <td>
            <div>Bar</div>
        </td>
    </tr>
</table>

<h2>Using ColGroup</h2>

<table>
    <colgroup>
        <col class="tiny" />
        <col class="half" />
        <col class="one-fifth" />
        <col />
    </colgroup>
    <tr>
        <td>
            <div>tiny</div>
        </td>
        <td>
            <div>half width</div>
        </td>
        <td>
            <div>one-fifth</div>
        </td>
        <td>
            <div>free column</div>
        </td>
    </tr>
</table>

CSS

table {
    width: 100%;
    border-spacing: 0;
    border-collapse: collapse;
}
td {
    border: 1px solid black;
    border-spacing: 0;
    border-collapse: collapse;
}
table .half {
    width: 50%;
}
table .quarter{
    width: 25%;
}
table .one-fifth{
    width: 20%
}
table .tiny{
    width: 24px;
}