JSFiddle - React, Tailwind, and code Playground

by Sherali Turdiyev

HTML

<div>
<table>
<tr>
<td>
</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>
</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>
</td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</div>

CSS

table{
border-collapse: collapse;
table-layout:fixed;
width:500px;
}
td{
border: 2px solid black;
-webkit-user-select:none;
width:25%;
height:20px;
white-space:nowrap;
overflow:visible;
text-overflow:ellipsis;
padding:0px;
}

JavaScript

$(function(){
	$('td').attr('contenteditable','true');
    $('td').click(function(){
        $(this).prev('td').css({overflow:"hidden"})
        
    });
});