title: Table with scrollable rows and fixed header
body: <p>I have <a href="http://jsfiddle.net/ionmang20/MVxZb/" rel="nofollow noreferrer">this code</a> based on <a href="https://stackoverflow.com/a/11807628/3029422">this solution</a>, but it does not seem to work for me.</p>
  
  <p>I would like to be able to :</p>
  
  <ul>
  <li>scroll the rows</li>
  <li>the header to be fixed</li>
  <li>the headers width to be the same as the first <code>TD</code> row.</li>
  </ul>
  
  <p>I am quite new to JavaScript, so I do not know what I am missing. The scroll part is working, but not in jsfiddle. How can I make the <code>TH</code> the same width as the <code>TD</code>?</p>
  
  <p><strong>EDIT 1 :</strong></p>
  
  <p><strong>Code</strong></p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
      &lt;style&gt;
          .outerDIV {
              position: relative;
              padding-top: 30px;   //height of your thead
          }
          .innerDIV {
              overflow: auto;
              max-height: 200;       //the actual scrolling container
          }
          table thead {
              display: block;
              position: absolute;
              top: 0;
              left: 0;
          }
          table tbody {
              display: block;
          }
      &lt;/style&gt;
      &lt;script&gt;
          function scrollingTableSetThWidth(tableId)
          {
              var table = document.getElementById(tableId);
  
              ths = table.getElementsByTagName('th');
              tds = table.getElementsByTagName('td');
  
              if(ths.length &gt; 0) {
                  for(i=0; i &lt; ths.length; i++) {
                      ths[i].style.width = getCurrentComputedStyle(tds[i], 'width');
                  }
              }
          }
  
          function getCurrentComputedStyle(element, attribute)
          {
              var attributeValue;
              if (window.getComputedStyle) 
              { // class A browsers
                  var styledeclaration = document.defaultView.getComputedStyle(element, null);
                  attributeValue = styledeclaration.getPropertyValue(attribute);
              } else if (element.currentStyle) { // IE
                  attributeValue = element.currentStyle[vclToCamelCases(attribute)];
              }
              return attributeValue;
          }
      &lt;/script&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div class="outerDIV"&gt;
          &lt;div class="innerDIV"&gt;
              &lt;table border="1"&gt;
                  &lt;thead&gt;
                      &lt;tr&gt;
                          &lt;div&gt;&lt;th&gt;Column1&lt;/th&gt;&lt;th&gt;Column2&lt;/th&gt;&lt;th&gt;Column3&lt;/th&gt;&lt;/div&gt;
                      &lt;/tr&gt;
                  &lt;/thead&gt;
                  &lt;tbody&gt;
                      &lt;tr&gt;
                          &lt;td&gt;Line1Cell1&lt;/td&gt;&lt;td&gt;Line1Cell2&lt;/td&gt;&lt;td&gt;Line1Cell3&lt;/td&gt;
                      &lt;/tr&gt;
                      &lt;tr&gt;
                          &lt;td&gt;Line2Cell1&lt;/td&gt;&lt;td&gt;Line2Cell2&lt;/td&gt;&lt;td&gt;Line2Cell3&lt;/td&gt;
                      &lt;/tr&gt;
                      &lt;tr&gt;
                          &lt;td&gt;Line3Cell1&lt;/td&gt;&lt;td&gt;Line3Cell2&lt;/td&gt;&lt;td&gt;Line3Cell3&lt;/td&gt;
                      &lt;/tr&gt;
                      &lt;tr&gt;
                          &lt;td&gt;Line4Cell1&lt;/td&gt;&lt;td&gt;Line4Cell2&lt;/td&gt;&lt;td&gt;Line4Cell3&lt;/td&gt;
                      &lt;/tr&gt;
                      &lt;tr&gt;
                          &lt;td&gt;Line5Cell1&lt;/td&gt;&lt;td&gt;Line5Cell2&lt;/td&gt;&lt;td&gt;Line5Cell3&lt;/td&gt;
                      &lt;/tr&gt;
                      &lt;tr&gt;
                          &lt;td&gt;Line6Cell1&lt;/td&gt;&lt;td&gt;Line6Cell2&lt;/td&gt;&lt;td&gt;Line6Cell3&lt;/td&gt;
                      &lt;/tr&gt;
                      &lt;tr&gt;
                          &lt;td&gt;Line7Cell1&lt;/td&gt;&lt;td&gt;Line7Cell2&lt;/td&gt;&lt;td&gt;Line7Cell3&lt;/td&gt;
                      &lt;/tr&gt;
                      &lt;tr&gt;
                          &lt;td&gt;Line8Cell1&lt;/td&gt;&lt;td&gt;Line8Cell2&lt;/td&gt;&lt;td&gt;Line8Cell3&lt;/td&gt;
                      &lt;/tr&gt;
                      &lt;tr&gt;
                          &lt;td&gt;Line9Cell1&lt;/td&gt;&lt;td&gt;Line9Cell2&lt;/td&gt;&lt;td&gt;Line9Cell3&lt;/td&gt;
                      &lt;/tr&gt;
                      &lt;tr&gt;
                          &lt;td&gt;Line10Cell1&lt;/td&gt;&lt;td&gt;Line10Cell2&lt;/td&gt;&lt;td&gt;Line10Cell3&lt;/td&gt;
                      &lt;/tr&gt;
                  &lt;/tbody&gt;
              &lt;/table&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>