JSFiddle - React, Tailwind, and code Playground

by Allendar

HTML

<table>
    <thead>
        <tr>
            <th>One</th>
            <th>Two</th>
            <th>Three</th>
            <th>Four</th>
            <th>Five</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>Text that could be too long for this column and it should be truncated.</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
        </tr>
    </tbody>
</table>

CSS

table {
    border: 1px solid #ddd;
    border-collapse: collapse;
    width: 550px;
}

table, table th, table td, table th div, table td div {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0px;
    margin: 0px;
    text-align: left;
}

table th, table td {
    border: 1px solid #ddd;
}

table th div, table td div {
    padding: 5px 15px;
}

table tr th:nth-child(1), table tr td:nth-child(1), table tr th:nth-child(1) div, table tr td:nth-child(1) div {
    width: 60px;
}

table tr td:nth-child(2) div {
    min-width: 60px;
    max-width: 213px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

table tr td:nth-child(n + 3), table tr td:nth-child(n + 3) div {
    width: 90px;
}

JavaScript

$('table').find('th').each(function() {
    $(this).html('<div>' + $(this).html() + '</div>');
});

$('table').find('td').each(function() {
    $(this).html('<div>' + $(this).html() + '</div>');
});