I have a dynamically made HTML table. I want to hide one of the columns with style.visibility = "hidden"

The cell i want to hide is provided with the needed ID, but when i do this my whole table disappears.

// get element ID & set to hidden
document.getElementById('wachtwoord')!.style.visibility = 'hidden'

// set ID of the cell & append to DOM
 Object.values(userData).forEach((userDataElement, columnIndex) => {
      // create element and textnode      
      let cell: HTMLTableDataCellElement = document.createElement("td");
      let textNode: Text = document.createTextNode(userDataElement as string);

      // append to DOM   
      cell.appendChild(textNode);
      row.appendChild(cell);
      table.appendChild(row);
      createTable!.appendChild(table);

      row.id = userData.id

      if (columnIndex === 3) {
        cell.id = "wachtwoord"
      };

How can i hide a specific table cell?