JSFiddle - React, Tailwind, and code Playground

by Helid

HTML

Normal table
<table style="width: 100%">
    <tr>
        <th>26/12</th>
        <th>27/12</th>
        <th>28/12</th>
    </tr>
    <tr>
        <td>123</td>
        <td>123</td>
        <td>123</td>
    </tr>
</table>

Table with colspan (I can't resize columns with days)

<table style="width: 100%">
    <tr>
        <th colspan="3">Table</th>
    </tr>
    <tr>
        <th>26/12</th>
        <th>27/12</th>
        <th>28/12</th>
    </tr>
    <tr>
        <td>123</td>
        <td>123</td>
        <td>123</td>
    </tr>
</table>

CSS

td, th {
    border: 1px solid #ccc;
}
table, td, th {
    table-layout:fixed;
    overflow:hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

table { margin: 1em 0; }

JavaScript

$(function () {
    $('table th').resizable({
        handles: 'e',
        minWidth: 18
    });
});