JSFiddle - React, Tailwind, and code Playground

by elcoyote67

HTML

<table id="the-table" style="width:100%;">
    <tr><td >ABCDEF</td><td class="nothing" >ABCDEF</td></tr>
</table>

CSS

#the-table td {
    border: 1px solid black;
}
#the-table td .wrap {
       overflow: hidden; /* try different values for different effects */
    min-width: 200px;
    max-width: 400px;
    }

.nothing {
    min-width: 200px;
    max-width: 400px;
    }

 #the-table tr:hover {
    font-weight: bold;
}

JavaScript

$('#the-table th, #the-table td').wrapInner(function() {
           console.log($(this).width());
           return $("<div class='wrap'/>").css("width", $(this).width() + "px");
        });