title: Uneven table cells when changing display none
body: <p>I am having trouble with my HTML tables when I hide and show rows using JavaScript (display:block).
  I need to hide rows through JavaScript but when I re-show the rows, then I find that the table grid layout is lost and the previously hidden row is collapsed into the left side of the grid.</p>
  
  <p>My sandbox code is as follows:</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
  &lt;style type="text/css"&gt;
      table {
      }
      .rowA {
          background-color: #70cdb3;
      }
      .rowB {
          background-color: #fff1dc;
      }
      .rowC {
          background-color: #edc7ff;
      }
      .cell {
          border: solid 3pt white;
          width:25%;
      }
      a {
          cursor: pointer;
      }
  &lt;/style&gt;
  
  &lt;SCRIPT type='text/JavaScript'&gt;
      function hide(elemid) {
          var elem=document.getElementById(elemid);
          elem.style.display='none';
      }
  
      function show(elemid) {
          var elem=document.getElementById(elemid);
          elem.style.display='block';
      }
  &lt;/SCRIPT&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;table&gt;
  &lt;tr class='rowA'&gt;
      &lt;td class='cell'&gt;
      &lt;a onClick="hide('row1')"&gt;Hide Row1&lt;/a&gt;
      &lt;/td&gt;
      &lt;td class='cell'&gt;
      &lt;a onClick="show('row1')"&gt;show Row1&lt;/a&gt;
      &lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr class='rowB'&gt;
      &lt;td class='cell'&gt;
      &lt;a onClick="hide('row2')"&gt;Hide Row2&lt;/a&gt;
      &lt;/td&gt;
      &lt;td class='cell'&gt;
      &lt;a onClick="show('row2')"&gt;show Row2&lt;/a&gt;
      &lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr class='rowC'&gt;
      &lt;td class='cell'&gt;
      &lt;a onClick="hide('row3')"&gt;Hide Row3&lt;/a&gt;
      &lt;/td&gt;
      &lt;td class='cell'&gt;
      &lt;a onClick="show('row3')"&gt;show Row3&lt;/a&gt;
      &lt;/td&gt;
  &lt;/tr&gt;
  &lt;/table&gt;
  &lt;hr&gt;
  &lt;table class='table' style='width:50%'&gt;
  &lt;thead&gt;
  &lt;tr&gt;
      &lt;th&gt;ID&lt;/th&gt;
      &lt;th&gt;Name&lt;/th&gt;
      &lt;th&gt;Job&lt;/th&gt;
      &lt;th&gt;Email&lt;/th&gt;
  &lt;/tr&gt;
  &lt;/thead&gt;
  &lt;tbody&gt;
  &lt;tr class='rowA' id='row1'&gt;
      &lt;td class='cell'&gt;one&lt;/td&gt;
      &lt;td class='cell'&gt;Johnny Five&lt;/td&gt;
      &lt;td class='cell'&gt;Robotin'&lt;/td&gt;
      &lt;td class='cell'&gt;need@input.com&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr class='rowB' id='row2'&gt;
      &lt;td class='cell'&gt;two&lt;/td&gt;
      &lt;td class='cell'&gt;Super notsolong&lt;/td&gt;
      &lt;td class='cell'&gt;Doin' stuff&lt;/td&gt;
      &lt;td class='cell'&gt;doing@stuff.com&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr class='rowC' id='row3'&gt;
      &lt;td class='cell'&gt;three&lt;/td&gt;
      &lt;td class='cell'&gt;Super Superlonglastnamesmith&lt;/td&gt;
      &lt;td class='cell'&gt;Doin' stuff&lt;/td&gt;
      &lt;td class='cell'&gt;doing@stuff.com&lt;/td&gt;
  &lt;/tr&gt;
  &lt;/tbody&gt;
  &lt;/table&gt;
  
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Using the sandbox, the problem is when I click on the Hide row buttons at the top of the sandbox, and then Show the row again - then the rows cells collapse into the left.</p>
  
  <p>Note, this seems to occur in IE 10, Edge, Chrome, and Firefox, but not IE9</p>
  
  <p>What am I doing wrong?</p>
  
  <p>Thanks</p>
  
  <p>A</p>