表格行的显示样式与标题保持对齐

我有一个表，使用 javascript，我为用户提供了通过将显示样式设置为无来从表中删除表行的选项。如果用户想再次查看行，我需要将显示样式从无中移开，我的问题是我不知道要使用哪种样式。我认为表行组是最明智的，但它弄乱了行......我在这里创建了一个小提琴并复制了下面的代码

https://jsfiddle.net/b2s3dpo5/#&togetherjs=7EwfsBJIfw

<fieldset style="display: inline-block;">
  <div style="display: inline-block;">
    <input type="checkbox" name="{{ category.name }}" id="category" checked> remove rows&nbsp;&nbsp;&nbsp;
  </div>
</fieldset>
<div class="panel panel-default col-xs-12">
<table class="table table-striped">
<thead>
  <tr>
    <th><strong>ID</strong></th>
    <th><strong>test test test</strong></th>
    <th><strong>Institute/Organisation</strong></th>
    <th><strong>test deadline test</strong></th>
  </tr>
</thead>
<tbody>
  <tr class="category">
    <th class="col-xs-1" scope="row">
      test
    </th>
    <td class="col-xs-5">
      test
    </td>
    <td class="col-xs-4">
      test
    </td>
    <td class="col-xs-2">
      test
    </td>
  </tr>
</tbody>
</table>
</div>

和必要的JavaScript

document.getElementById('category').onclick = function() {
  toggleSub_by_class(this, 'category');
};
function toggleSub_by_class(box, select_class) {
// get reference to related content to display/hide
 var el = document.getElementsByClassName(select_class);
 var flag;
 if (box.checked) {
   for (var i = 0, j = el.length; i < j; i++) {
     el[i].style.display = 'table-row-group';
   }
 } else {
   for (var i = 0, j = el.length; i < j; i++) {
     var classList = el[i].className.split(' ')
     flag = 0
     for (var h = 0, k = classList.length; h < k; h++) {
       if (document.getElementById(classList[h])) {
         if (document.getElementById(classList[h]).checked) {
           flag = 1
         }
       }
     }
     if (flag == 0) {
       el[i].style.display = 'none';
     }
   }
 }
}