JSFiddle - React, Tailwind, and code Playground
HTML
<table id="tableEditor" >
<tr>
<td>Country</td>
<td style="text-align:left;">
<select name="select">
<option value="value1">USA</option>
<option value="value2" >Sweden</option>
<option value="value3">Norway</option>
</select>
</td>
<td>Inventory ID</td>
<td style="text-align:left;">$123.23</td>
<td>Cost</td>
<td style="text-align:left;">$312.21</td>
<td>Description</td>
<td style="text-align:left;">this is a description</td>
</tr>
</table>
CSS
#tableEditor {
position: absolute;
left: 20px;
top: 20px;
padding: 5px;
border: 1px solid #000;
background: #fff;
}
body,
th,
td {
font: normal 12pt Verdana;
}
table {
border-collapse: collapse;
margin: 1em 0 0 0;
}
th,
td {
text-align: left;
border: 1px solid #ccc;
padding: 2px 5px 2px 2px;
}
td:nth-of-type(5)
{
visibility: hidden;
}
td:nth-of-type(6)
{
display: none;
}
JavaScript
// decide which TR you want to hide
// this is just an example of how you could pick one
var tds = document.getElementsByTagName("td");
tds[3].style.visibility = "hidden";