title: display style for table row to stay aligned with header
body: <p>I have a table and using javascript I give the user the option to remove table rows from the table by putting the display style to none.
  If the user wants to see the rows again, I need to put the display style away from none and my problem is that I don't know what style to use. I thought table-row-group is the most sensible, but it messes up the rows...
  I created a fiddle here and copied the code below</p>
  
  <p><a href="https://jsfiddle.net/b2s3dpo5/#&amp;togetherjs=7EwfsBJIfw" rel="nofollow">https://jsfiddle.net/b2s3dpo5/#&amp;togetherjs=7EwfsBJIfw</a></p>
  
  <pre><code>&lt;fieldset style="display: inline-block;"&gt;
    &lt;div style="display: inline-block;"&gt;
      &lt;input type="checkbox" name="{{ category.name }}" id="category" checked&gt; remove rows&amp;nbsp;&amp;nbsp;&amp;nbsp;
    &lt;/div&gt;
  &lt;/fieldset&gt;
  
  &lt;div class="panel panel-default col-xs-12"&gt;
  &lt;table class="table table-striped"&gt;
  &lt;thead&gt;
    &lt;tr&gt;
      &lt;th&gt;&lt;strong&gt;ID&lt;/strong&gt;&lt;/th&gt;
      &lt;th&gt;&lt;strong&gt;test test test&lt;/strong&gt;&lt;/th&gt;
      &lt;th&gt;&lt;strong&gt;Institute/Organisation&lt;/strong&gt;&lt;/th&gt;
      &lt;th&gt;&lt;strong&gt;test deadline test&lt;/strong&gt;&lt;/th&gt;
    &lt;/tr&gt;
  &lt;/thead&gt;
  &lt;tbody&gt;
    &lt;tr class="category"&gt;
      &lt;th class="col-xs-1" scope="row"&gt;
        test
      &lt;/th&gt;
      &lt;td class="col-xs-5"&gt;
        test
      &lt;/td&gt;
      &lt;td class="col-xs-4"&gt;
        test
      &lt;/td&gt;
      &lt;td class="col-xs-2"&gt;
        test
      &lt;/td&gt;
    &lt;/tr&gt;
  &lt;/tbody&gt;
  &lt;/table&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and the necessary javascript</p>
  
  <pre><code>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 &lt; j; i++) {
       el[i].style.display = 'table-row-group';
     }
   } else {
     for (var i = 0, j = el.length; i &lt; j; i++) {
       var classList = el[i].className.split(' ')
       flag = 0
       for (var h = 0, k = classList.length; h &lt; k; h++) {
         if (document.getElementById(classList[h])) {
           if (document.getElementById(classList[h]).checked) {
             flag = 1
           }
         }
       }
       if (flag == 0) {
         el[i].style.display = 'none';
       }
     }
   }
  }   
  </code></pre>