JSFiddle - React, Tailwind, and code Playground

by Xsanda

HTML

<table>
    <tr>
        <td>Cell with lots of text like this</td>
        <td>Data 12e</td>
        <td>4 Feb 2003</td>
        <td>True</td>
    </tr>
    <tr>
        <td>Cell with less info</td>
        <td>Data 123e</td>
        <td>Today</td>
        <td>False</td>
    </tr>
    <tr>
        <td>Information is useful but sometimes it should be shortened.</td>
        <td>Data 123e</td>
        <td>Today</td>
        <td>False</td>
    </tr>
</table>

<p>Ideally it should be shortened to like this:</p>

<table>
    <tr>
        <td>Cell with lots of text like this</td>
        <td>Data 12e</td>
        <td>4 Feb 2003</td>
        <td>True</td>
    </tr>
    <tr>
        <td>Cell with less info</td>
        <td>Data 123e</td>
        <td>Today</td>
        <td>False</td>
    </tr>
    <tr>
        <td>Information is useful but&hellip;</td>
        <td>Data 123e</td>
        <td>Today</td>
        <td>False</td>
    </tr>
</table>
<p>Only the first column is truncated.</p>

CSS

table {
    width: 400px;
}

td {
    border: 1px solid black;
    white-space: nowrap;
}

td:first-child {
    text-overflow: ellipsis;
}