JSFiddle - React, Tailwind, and code Playground

HTML

<table class="tblCal">
    <colgroup>
        <col class="col1" />
        <col class="col2" />
        <col class="col3" />
    </colgroup>
    <thead>
        <tr>
            <th colspan="3" class="th th2">Col 1</th>
        </tr>
    </thead>
    <tbody id="bodyCal">        
    </tbody>
</table>

JavaScript

var tbody = '';
	for (var i = 1; i <= 5; i++) {
		tbody +=  "<tr> <td class='td col1'>" + i +" </td> \
					<td class='td col2'>2</td> \
					<td class='td col3'><div contenteditable='true' class='editable'></div></td> \
				</tr>";
	}
	$('#bodyCal').html(tbody);