JSFiddle - React, Tailwind, and code Playground

HTML

<table class="editableTable table table-striped table-bordered">
<thead>
	<tr>
		<th> A </th>
		<th> B </th>
		<th> C </th>
		<th> D </th>
	</tr>
</thead>
<tbody>
	<tr>
        <td> a </td>
        <td> b </td>
        <td> c </td>
        <td> d </td>
	</tr>	
</tbody>
</table>

CSS

.editableTable 
    {
      border:solid 1px; 
        width:100% 
    } 
.editableTable td 
{ 
    border:solid 2px; 
} 
.editableTable .cellEditing 
{ 
    padding: 0; 
} 
.editableTable .cellEditing input[type=text]
{ 
    width:100%; 
    border:0; 
    background-color:rgb(255,253,210); 
}

JavaScript

$(function () 
        { 
            $("td").dblclick(function () 
                { 
                    var OriginalContent = $(this).text(); 
                    $(this).addClass("cellEditing"); 
                    $(this).html("<input type='text' value='" + OriginalContent + "' />"); 
                    $(this).children().first().focus(); 
                    $(this).children().first().keypress(function (e) 
                        {
                            if (e.which == 13)
                                {   
                                    var newContent = $(this).val(); 
                                    $(this).parent().text(newContent); 
                                    $(this).parent().removeClass("cellEditing"); 
                                } 
                        }); 
                    $(this).children().first().blur(function()
                        {
                            $(this).parent().text(OriginalContent); 
                            $(this).parent().removeClass("cellEditing"); 
                        }); 
                }); 
        });