JSFiddle - React, Tailwind, and code Playground

by BinaryAcid

HTML

<table>
    <colgroup>
        <col>
        <col class=t20>
        <col class=t20>
        <col class=t20>
    </colgroup>
    <thead>
        <tr>
            <th>Lorem</th>
            <th>Ipsum</th>
            <th>Dolor</th>
            <th>Sit</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Sit</td>
            <td>Dolor</td>
            <td>Ipsum</td>
            <td>Lorem</td>
        </tr>
        <tr>
            <td>Sit</td>
            <td>Dolor</td>
            <td>Ipsum</td>
            <td>Lorem</td>
        </tr>
        <tr>
            <td>Sit</td>
            <td>Dolor</td>
            <td>Ipsum</td>
            <td>Lorem</td>
        </tr>
        <tr>
            <td>Sit</td>
            <td>Dolor</td>
            <td>Ipsum</td>
            <td>Lorem</td>
        </tr>
        <tr>
            <td>Sit</td>
            <td>Dolor</td>
            <td>Ipsum</td>
            <td>Lorem</td>
        </tr>
    </tbody>
</table>

<table>
    <colgroup>
        <col>
        <col class=t40>
        <col class=t20>
    </colgroup>
    <thead>
        <tr>
            <th>Lorem</th>
            <th>Ipsum</th>
            <th>Dolor</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Dolor</td>
            <td>Ipsum</td>
            <td>Lorem</td>
        </tr>
        <tr>
            <td>Dolor</td>
            <td>Ipsum</td>
            <td>Lorem</td>
        </tr>
        <tr>
            <td>Dolor</td>
            <td>Ipsum</td>
            <td>Lorem</td>
        </tr>
        <tr>
            <td>Dolor</td>
            <td>Ipsum</td>
            <td>Lorem</td>
        </tr>
        <tr>
            <td>Dolor</td>
            <td>Ipsum</td>
            <td>Lorem</td>
        </tr>
    </tbody>
</table>

<table>
    <colgroup>
        <col class=t60>
        <col class=t20>
        <col>
    </colgroup>
    <thead>
        <tr>
            <th>Lorem</th>
            <th>Ipsum</th>
           ...

CSS

/* Housekeeping */
html{
    font:0.75em/1.5 sans-serif;
    color:#333;
    background-color:#fff;
    padding:1em;
}

/* Tables */
table{
    width:100%;
    margin-bottom:1em;
}
th{
    font-weight:bold;
}
th,
td{
    padding:0.5em;
    border:1px solid #ccc;
}

/* Table sizing */
.t10    { width:10% }
.t20    { width:20% }
.t25    { width:25% }
.t30    { width:30% }
.t33    { width:33.333% }
.t40    { width:40% }
.t50    { width:50% }
.t60    { width:60% }
.t66    { width:66.666% }
.t70    { width:70% }
.t75    { width:75% }
.t80    { width:80% }
.t90    { width:90% }

JavaScript

/*
A neat way of aligning the columns in tables up with each other -- a table grid system of sorts.
Apply these classes to `<col>` elements in a `<table>`’s `<colgroup>`.
Always leave one `<col>` without a class so that it remains fluid and can ‘soak up’ the effects of any breakages elsewhere in the table.
*/