title: jQuery toggle removing table columns
body: <p>I have a table with sections inside it. i am using jQuery to hide different sections and that part works absolutely fine but when I hide all of them, something happens to the row. The row has a colspan of 3 but when all are hidden it becomes only one column. I have attached the jsfiddle link below. I cant't seem to figure out why this is happening. I tried for the header to have the columns 25%, 25% and 50% and it's not doing anything.  Another issue I have is that even if I put every row/table/th width 100% it is still not the length of the window. </p>
  
  <p>Currently I am forcing the width of the columns by this code </p>
  
  <pre><code>.fixed_headers td:nth-child(1),
  .fixed_headers th:nth-child(1) {
    min-width: 200px;
   }
  </code></pre>
  
  <p>for each of the columns... I can't make this to work to be % based. Unfortunately I am not a frontend developer and the little things like this are annoying as hell to figure out. </p>
  
  <p>Also I notice that in the snippet below the header does not work, only in JsFiddle it does. </p>
  
  <p><a href="http://jsfiddle.net/VladN/zhx64egb/26/" rel="nofollow">JsFiddle</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function() {
    $("tr").click(function() {
      $(this).toggleClass("highlighted");
    })
  
    $('.ok').on('click', function(e) {
      var selected = [];
      $("#table tr.highlighted").each(function() {
        selected.push($('td:first', this).html());
      });
      alert(selected);
    });
  
  
    $('.hd').click(function() {
      $(this).toggleClass('expand').nextUntil('tr.hd').slideToggle(1);
    });
  
  
  
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.tableDiv {
    border: 1px solid #6C8CD9;
    width:100%;
  }
  
  .tableTitle {
    height: 20px;
    background-color: #D4DFFA;
    font: bold 8pt Tahoma Black;
    text-align: left;
    padding-top: 5px;
    padding-left: 5px;
    border: 1px solid #FFFFFF;
  }
  
  .tableFunction {
    height: 20px;
    background-color: #D4DFFA;
    color: #737373;
    font: 8pt Tahoma;
    text-align: left;
    padding-top: 5px;
    padding-left: 5px;
    border: 1px solid #FFFFFF;
    border-top: 0px;
  }
  
  .fixed_headers {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
  }
  
  .fixed_headers th {
    border-right: 1px solid #EBEFF3;
    border-bottom: 1px solid #A8BBE0;
    padding: 4px;
    text-align: left;
    font: normal 8pt Tahoma;
    background: -webkit-linear-gradient(#FFFFFF, #DFE7F7);
    border-top: 1px solid #A8BBE0;
    height: 20px;
    width: 100%;
  }
  
  .fixed_headers td {
    border-right: 1px solid #EBEFF3;
    border-bottom: 1px solid #EBEFF3;
    padding: 4px;
    text-align: left;
    font: normal 8pt Tahoma;
  }
  
  .fixed_headers thead {
    background: -webkit-linear-gradient(#FFFFFF, #DFE7F7);
    color: #737373;
    width: 100%;
  }
  
  .fixed_headers thead tr {
    width: 100%;
    display: block;
    position: relative;
  }
  .fixed_headers thead td {
    color: #737373;
    
  }
  
  .fixed_headers tbody {
    display: block;
    overflow: auto;
    width: 100%;
    height: 300px;
  }
  
  .fixed_headers tr:nth-child(odd) {
      width: 100%;
    background-color: #f0f4fa;
  }
  
  .fixed_headers tr:nth-child(even) {
    width: 100%;
    background-color: #ffffff;
  }
  
  .fixed_headers tr.highlighted {
    color: #261F1D;
    background-color: #FFCC66;
  }
  
  .fixed_headers tr:hover {
    color: #261F1D;
    background-color: #FFE8BA;
  }
  
  .fixed_headers tr.hd {
    cursor: pointer;
    font: bold 8pt Tahoma;
    background-color: #FFE0BA;
  }
  
  .hd .sign:after {
    content: "-";
    display: inline-block;
  }
  
  .fixed_headers tr.sub-hd {
    cursor: pointer;
    font: bold 8pt Tahoma;
    background-color: #FF10AA;
  }
  
  .hd.expand .sign:after {
    content: "+";
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="tableDiv"&gt;
    &lt;div class="tableTitle"&gt;
      Title for the table
    &lt;/div&gt;
    &lt;div class="tableFunction"&gt;
      Table function
    &lt;/div&gt;
    &lt;table class="fixed_headers" id="table"&gt;
      &lt;thead&gt;
        &lt;tr&gt;
          &lt;th&gt;Name&lt;/th&gt;
          &lt;th&gt;Color&lt;/th&gt;
          &lt;th&gt;Description&lt;/th&gt;
        &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
        &lt;tr class="hd"&gt;
          &lt;td colspan='3'&gt;Header &lt;span class="sign"&gt;&lt;/span&gt;&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr class="sub-hd"&gt;
          &lt;td colspan='3'&gt;Sub Header&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
  
          &lt;td&gt;Apple&lt;/td&gt;
          &lt;td&gt;Red&lt;/td&gt;
          &lt;td&gt;These are red.&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
  
          &lt;td&gt;Pear&lt;/td&gt;
          &lt;td&gt;Green&lt;/td&gt;
          &lt;td&gt;These are green.&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
  
          &lt;td&gt;Grape&lt;/td&gt;
          &lt;td&gt;Purple / Green&lt;/td&gt;
          &lt;td&gt;These are purple and green.&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
  
          &lt;td&gt;Orange&lt;/td&gt;
          &lt;td&gt;Orange&lt;/td&gt;
          &lt;td&gt;These are orange.&lt;/td&gt;
        &lt;/tr&gt;
  
        &lt;tr class="hd"&gt;
          &lt;td colspan="3"&gt;Header &lt;span class="sign"&gt;&lt;/span&gt;&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr class="sub-hd"&gt;
          &lt;td colspan='3'&gt;Sub Header&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td&gt;Kiwi&lt;/td&gt;
          &lt;td&gt;Green&lt;/td&gt;
          &lt;td&gt;These are green.&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
  
          &lt;td&gt;Plum&lt;/td&gt;
          &lt;td&gt;Purple&lt;/td&gt;
          &lt;td&gt;These are Purple&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr class="sub-hd"&gt;
          &lt;td colspan='3'&gt;Sub Header&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
  
          &lt;td&gt;Plum&lt;/td&gt;
          &lt;td&gt;Purple&lt;/td&gt;
          &lt;td&gt;These are Purple&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
  
          &lt;td&gt;Watermelon&lt;/td&gt;
          &lt;td&gt;Red&lt;/td&gt;
          &lt;td&gt;These are red.&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
  
          &lt;td&gt;Tomato&lt;/td&gt;
          &lt;td&gt;Red&lt;/td&gt;
          &lt;td&gt;These are red.&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr class="sub-hd"&gt;
          &lt;td colspan='3'&gt;Sub Header&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
  
          &lt;td&gt;Cherry&lt;/td&gt;
          &lt;td&gt;Red&lt;/td&gt;
          &lt;td&gt;These are red.&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
  
          &lt;td&gt;Cantelope&lt;/td&gt;
          &lt;td&gt;Orange&lt;/td&gt;
          &lt;td&gt;These are orange inside.&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
  
          &lt;td&gt;Honeydew&lt;/td&gt;
          &lt;td&gt;Green&lt;/td&gt;
          &lt;td&gt;These are green inside.&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
  
          &lt;td&gt;Papaya&lt;/td&gt;
          &lt;td&gt;Green&lt;/td&gt;
          &lt;td&gt;These are green.&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr class="hd"&gt;
          &lt;td colspan="3"&gt;Header &lt;span class="sign"&gt;&lt;/span&gt;&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr class="sub-hd"&gt;
          &lt;td colspan='3'&gt;Sub Header&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
  
          &lt;td&gt;Plum&lt;/td&gt;
          &lt;td&gt;Purple&lt;/td&gt;
          &lt;td&gt;These are Purple&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
  
          &lt;td&gt;Raspberry&lt;/td&gt;
          &lt;td&gt;Red&lt;/td&gt;
          &lt;td&gt;These are red.&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
  
          &lt;td&gt;Blueberry&lt;/td&gt;
          &lt;td&gt;Blue&lt;/td&gt;
          &lt;td&gt;These are blue.&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr class="sub-hd"&gt;
          &lt;td colspan='3'&gt;Sub Header&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
  
          &lt;td&gt;Mango&lt;/td&gt;
          &lt;td&gt;Orange&lt;/td&gt;
          &lt;td&gt;These are orange.&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
  
          &lt;td&gt;Passion Fruit&lt;/td&gt;
          &lt;td&gt;Green&lt;/td&gt;
          &lt;td&gt;These are green.&lt;/td&gt;
        &lt;/tr&gt;
      &lt;/tbody&gt;
    &lt;/table&gt;
  &lt;/div&gt;
  &lt;input type="button" name="OK" class="ok" value="OK" /&gt;</code></pre>
  </div>
  </div>
  </p>