JSFiddle - React, Tailwind, and code Playground

by creed88

HTML

<div id="t1">
    
    <h3>Table 1</h3>

    <table>
        <thead>
            <tr>
                <th>id</th>
                <th>name</th>
                <th class="ellipsis">description</th>
                <th>phone</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>alpha</td>
                <td class="ellipsis">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
                <td>555-555-5555</td>
            </tr>
            <tr>
                <td>2</td>
                <td>beta</td>
                <td class="ellipsis">Sed et nulla neque.</td>
                <td>555-555-5555</td>
            </tr>
            <tr>
                <td>3</td>
                <td>gamma</td>
                <td class="ellipsis">Morbi imperdiet neque ut lorem rhoncus fermentum.</td>
                <td>555-555-5555</td>
            </tr>
        </tbody>
    </table>
</div>

<hr>

<div id="t2">
    
    <h3>Table 2</h3>

    <table>
        <thead>
            <tr>
                <th>id</th>
                <th>name</th>
                <th class="ellipsis">description</th>
                <th>phone</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>alpha</td>
                <td class="ellipsis">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
                <td>555-555-5555</td>
            </tr>
            <tr>
                <td>2</td>
                <td>beta</td>
                <td class="ellipsis">Sed et nulla neque.</td>
                <td>555-555-5555</td>
            </tr>
            <tr>
                <td>3</td>
                <td>gamma</td>
                <td class="ellipsis">Morbi imperdiet neque ut lorem rhoncus fermentum.</td>
                <td>555-555-5555</td>
            </tr>
        </tbody>
    </table>
</div>
    
<hr>

<div id="t3">
    
    <h3>Table 3</h3>

    <table>
  ...

CSS

#t1 table {
    table-layout:fixed;
    width:100%;
}
#t1 td {
    white-space: nowrap;
}
#t1 td.ellipsis {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    word-break: break-all;
    word-wrap: break-word;
}
#t2 table {
    width:100%;
}
#t2 td {
    white-space: nowrap;
}
#t2 td.ellipsis {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    word-break: break-all;
    word-wrap: break-word;
}

#t3 table {
    width:100%;
}
#t3 td {
    white-space: nowrap;
}
#t3 td.ellipsis {
    max-width:100px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    word-break: break-all;
    word-wrap: break-word;
}
table {
    border-collapse:collapse;
}
td {
    border:1px solid gray;
}