JSFiddle - React, Tailwind, and code Playground

by Sachin Kurkute

HTML

<table>
<tbody>
<tr>
    <td>Left col</td>
    <td class="ell">
        This is a rather long text. It should be truncated when it
        exceeds the available horizontal space.
    </td>
    <td>Right col</td>
</tr>
</tbody>
</table>

<p>
    table width: <input> <em>&larr; use mouse wheel to change</em><br>
    middle col width: <span></span>

CSS

body {
    font: normal 13px sans-serif;
}
table {
    width: 500px;
    border-collapse: collapse;
    background: gold;
}
td {
    white-space: nowrap;
}
td.ell {
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 250px;
    background: tomato;
    display: inline-block;
}
input {
    width: 50px;
}
em {
    color: #aaa;
    padding-left: 12px;
}

JavaScript

var table = document.querySelector("table"),
    cell  = document.querySelector(".ell"),
    sizer = document.querySelector("input"),
    span  = document.querySelector("span");

sizer.addEventListener("wheel", wheelHandler, false);
updateWidthDisplay();

function wheelHandler (evt)
{
    var incr = evt.deltaY < 0 ? 10 : -10;
    table.style.width = (table.offsetWidth + incr) + "px";
    updateWidthDisplay();
}

function updateWidthDisplay ()
{
    sizer.value = table.offsetWidth + "px";
    span.textContent = cell.offsetWidth + "px";
}