Как скрыть строки таблицы без изменения общей ширины?

Если вы хотите сохранить общую ширину таблицы, вы можете проверить ее перед скрытием строки и явно установить для свойства стиля ширины это значение:

table.style.width = table.clientWidth + "px";
table.rows[3].style.display = "none";

Однако это может привести к перекомпоновке отдельных столбцов при скрытии строки. Возможный способ смягчить это - добавить стиль в вашу таблицу:

 table {
  table-layout: fixed;
 }

Для справки, решение levik работает отлично. В моем случае с использованием jQuery решение выглядело примерно так:

$('#tableId').width($('#tableId').width());

В CSS table-layout: fixed; в вашей таблице указывает браузеру соблюдать размеры, указанные вами для высоты и ширины. Обычно это подавляет автоматическое изменение размера в браузере, если вы не дали никаких подсказок относительно предпочтительных размеров ваших строк и столбцов.

Вы можете сделать это, используя чистый HTML

<table border = "1">
  <colgroup>
    <col width = "150px" />
    <col width = "10px"  />
    <col width = "220px" />
  </colgroup>
  <tr>
    <td valign = "top">1</td>
    <td> </td>
    <td>2</td>
  </tr>
  <tr>
    <td>3</td>
    <td> </td>
    <td>4</td>
  </tr>
</table>

Правило CSS visibility: collapse было разработано именно для этого.

tbody.collapsed > tr {
    visibility: collapse;
}

После добавления этого CSS вы можете активировать видимость из JS с помощью:

tbody.classList.toggle('collapsed');