title: JavaScript Manipulation of DOM Issue
body: <p>I have a table which I want the first column to not move when I am scrolling horizontally. This code below works great for the first column of td's but does not work for the tr's. I have stepped through the code and it all appears to set the values I am expected, but the tr cell does not move with the td cells.</p>
  
  <pre><code>window.onscroll = function()
  {
      var scrollPosX = window.scrollX;
      var theTable = document.getElementById("tablename"),
      thead = theTable.getElementsByTagName("thead")[0];
      tbody = theTable.getElementsByTagName("tbody")[0];
      hrCell = thead.getElementsByTagName("tr")[0];
      hrCell.style.left = scrollPosX;
      rCells = tbody.getElementsByTagName("td");
      for(var i = 0; i &lt; rCells.length; i++)
      {
          rCells[i].style.left = scrollPosX;
      }
  }
  </code></pre>
  
  <p>JQuery is not an option in this problem as the program I am working on does not support it.</p>
  
  <pre><code>&lt;style&gt;
      table
      {
          border: solid black 1px;
      }
      td{
          min-width: 300px;
          border: solid black 1px;
      }
  
      #run_gen_table td:first-child, #run_gen_table th:first-child
      {
          background-color: white;
          position: relative;
      }
  &lt;/style&gt;
  
  &lt;table id="tablename"&gt;
      &lt;thead id="headname"&gt;
          &lt;tr&gt;&lt;th&gt;Run No.&lt;/th&gt;&lt;th&gt;2&lt;/th&gt;&lt;th&gt;3&lt;/th&gt;&lt;th&gt;4&lt;/th&gt;&lt;th&gt;5&lt;/th&gt;&lt;th&gt;6&lt;/th&gt;&lt;th&gt;7&lt;/th&gt;&lt;th&gt;8&lt;/th&gt;&lt;th&gt;9&lt;/th&gt;&lt;th&gt;10&lt;/th&gt;&lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody id="bodyname"&gt;
          &lt;tr&gt;&lt;td&gt;1&lt;/td&gt;&lt;td&gt;2&lt;/td&gt;&lt;td&gt;3&lt;/td&gt;&lt;td&gt;4&lt;/td&gt;&lt;td&gt;5&lt;/td&gt;&lt;td&gt;6&lt;/td&gt;&lt;td&gt;7&lt;/td&gt;&lt;td&gt;8&lt;/td&gt;&lt;td&gt;9&lt;/td&gt;&lt;td&gt;10&lt;/td&gt;&lt;/tr&gt;
          &lt;tr&gt;&lt;td&gt;1&lt;/td&gt;&lt;td&gt;2&lt;/td&gt;&lt;td&gt;3&lt;/td&gt;&lt;td&gt;4&lt;/td&gt;&lt;td&gt;5&lt;/td&gt;&lt;td&gt;6&lt;/td&gt;&lt;td&gt;7&lt;/td&gt;&lt;td&gt;8&lt;/td&gt;&lt;td&gt;9&lt;/td&gt;&lt;td&gt;10&lt;/td&gt;&lt;/tr&gt;
          &lt;tr&gt;&lt;td&gt;1&lt;/td&gt;&lt;td&gt;2&lt;/td&gt;&lt;td&gt;3&lt;/td&gt;&lt;td&gt;4&lt;/td&gt;&lt;td&gt;5&lt;/td&gt;&lt;td&gt;6&lt;/td&gt;&lt;td&gt;7&lt;/td&gt;&lt;td&gt;8&lt;/td&gt;&lt;td&gt;9&lt;/td&gt;&lt;td&gt;10&lt;/td&gt;&lt;/tr&gt;
      &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>