title: floating table header AND footer
body: <p>I am working on the table and I want to modify the javascript code so that the 'footer' at the end of the table floats at the bottom similar to the way the header floats at the top.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function UpdateTableHeaders() {
    $("div.divTableWithFloatingHeader").each(function() {
      var originalHeaderRow = $(".tableFloatingHeaderOriginal", this);
      var floatingHeaderRow = $(".tableFloatingHeader", this);
      var offset = $(this).offset();
      var scrollTop = $(window).scrollTop();
      if ((scrollTop &gt; offset.top) &amp;&amp; (scrollTop &lt; offset.top + $(this).height())) {
        floatingHeaderRow.css("visibility", "visible");
        floatingHeaderRow.css("top", Math.min(scrollTop - offset.top, $(this).height() - floatingHeaderRow.height()) + "px");
  
        // Copy cell widths from original header
        $("th", floatingHeaderRow).each(function(index) {
          var cellWidth = $("th", originalHeaderRow).eq(index).css('width');
          $(this).css('width', cellWidth);
        });
  
        // Copy row width from whole table
        floatingHeaderRow.css("width", $(this).css("width"));
      } else {
        floatingHeaderRow.css("visibility", "hidden");
        floatingHeaderRow.css("top", "0px");
      }
    });
  }
  
  $(document).ready(function() {
    $("table.tableWithFloatingHeader").each(function() {
      $(this).wrap("&lt;div class=\"divTableWithFloatingHeader\" style=\"position:relative\"&gt;&lt;/div&gt;");
  
      var originalHeaderRow = $("tr:first", this)
      originalHeaderRow.before(originalHeaderRow.clone());
      var clonedHeaderRow = $("tr:first", this)
  
      clonedHeaderRow.addClass("tableFloatingHeader");
      clonedHeaderRow.css("position", "absolute");
      clonedHeaderRow.css("top", "0px");
      //clonedHeaderRow.css("left", $(this).css("margin-left"));
      clonedHeaderRow.css("visibility", "hidden");
  
      originalHeaderRow.addClass("tableFloatingHeaderOriginal");
    });
    UpdateTableHeaders();
    $(window).scroll(UpdateTableHeaders);
    $(window).resize(UpdateTableHeaders);
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>th {
    background-color: lightgrey;
    border: 1px solid black;
  }
  
  td {
    border: 1px solid black;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"&gt;&lt;/script&gt;
  
  &lt;br/&gt;&lt;br/&gt;&lt;br/&gt;
  &lt;table class="tableWithFloatingHeader" style="border: 3px" align="center"&gt;
    &lt;thead&gt;
      &lt;tr&gt;
        &lt;th&gt;t2 col header&lt;/th&gt;
        &lt;th&gt;t2 col header&lt;/th&gt;
      &lt;/tr&gt;
    &lt;/thead&gt;
    &lt;tbody&gt;
      &lt;tr&gt;
        &lt;td&gt;t2 data1&lt;/td&gt;
        &lt;td&gt;t2 data1&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;t2 data2&lt;/td&gt;
        &lt;td&gt;t2 data2&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;t2 data3&lt;/td&gt;
        &lt;td&gt;t2 data3&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;t2 data4&lt;/td&gt;
        &lt;td&gt;t2 data4&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;t2 data5&lt;/td&gt;
        &lt;td&gt;t2 data5&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;t2 data6&lt;/td&gt;
        &lt;td&gt;t2 data6&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;t2 data7&lt;/td&gt;
        &lt;td&gt;t2 data7&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;t2 data8&lt;/td&gt;
        &lt;td&gt;t2 data8&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;t2 data9&lt;/td&gt;
        &lt;td&gt;t2 data9&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;t2 data10&lt;/td&gt;
        &lt;td&gt;t2 data10&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;t2 data5&lt;/td&gt;
        &lt;td&gt;t2 data5&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;t2 data6&lt;/td&gt;
        &lt;td&gt;t2 data6&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;t2 data7&lt;/td&gt;
        &lt;td&gt;t2 data7&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;t2 data8&lt;/td&gt;
        &lt;td&gt;t2 data8&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;t2 data9&lt;/td&gt;
        &lt;td&gt;t2 data9&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;t2 data10&lt;/td&gt;
        &lt;td&gt;t2 data10&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;t2 data5&lt;/td&gt;
        &lt;td&gt;t2 data5&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;t2 data6&lt;/td&gt;
        &lt;td&gt;t2 data6&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;t2 data7&lt;/td&gt;
        &lt;td&gt;t2 data7&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;t2 data8&lt;/td&gt;
        &lt;td&gt;t2 data8&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;t2 data9&lt;/td&gt;
        &lt;td&gt;t2 data9&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;t2 data10&lt;/td&gt;
        &lt;td&gt;t2 data10&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;t2 data5&lt;/td&gt;
        &lt;td&gt;t2 data5&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;t2 data6&lt;/td&gt;
        &lt;td&gt;t2 data6&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;t2 data7&lt;/td&gt;
        &lt;td&gt;t2 data7&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;t2 data8&lt;/td&gt;
        &lt;td&gt;t2 data8&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;t2 data9&lt;/td&gt;
        &lt;td&gt;t2 data9&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;t2 data10&lt;/td&gt;
        &lt;td&gt;t2 data10&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;t2 data5&lt;/td&gt;
        &lt;td&gt;t2 data5&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;t2 data6&lt;/td&gt;
        &lt;td&gt;t2 data6&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;t2 data7&lt;/td&gt;
        &lt;td&gt;t2 data7&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;t2 data8&lt;/td&gt;
        &lt;td&gt;t2 data8&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;t2 data9&lt;/td&gt;
        &lt;td&gt;t2 data9&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;t2 data10&lt;/td&gt;
        &lt;td&gt;t2 data10&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;t2 data5&lt;/td&gt;
        &lt;td&gt;t2 data5&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;t2 data6&lt;/td&gt;
        &lt;td&gt;t2 data6&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;t2 data7&lt;/td&gt;
        &lt;td&gt;t2 data7&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;t2 data8&lt;/td&gt;
        &lt;td&gt;t2 data8&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;t2 data9&lt;/td&gt;
        &lt;td&gt;t2 data9&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;t2 data10&lt;/td&gt;
        &lt;td&gt;t2 data10&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;t2 data5&lt;/td&gt;
        &lt;td&gt;t2 data5&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;t2 data6&lt;/td&gt;
        &lt;td&gt;t2 data6&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;t2 data7&lt;/td&gt;
        &lt;td&gt;t2 data7&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;t2 data8&lt;/td&gt;
        &lt;td&gt;t2 data8&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;t2 data9&lt;/td&gt;
        &lt;td&gt;t2 data9&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;t2 data10&lt;/td&gt;
        &lt;td&gt;t2 data10&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;t2 data5&lt;/td&gt;
        &lt;td&gt;t2 data5&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;t2 data6&lt;/td&gt;
        &lt;td&gt;t2 data6&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;t2 data7&lt;/td&gt;
        &lt;td&gt;t2 data7&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;t2 data8&lt;/td&gt;
        &lt;td&gt;t2 data8&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;t2 data9&lt;/td&gt;
        &lt;td&gt;t2 data9&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;t2 data10&lt;/td&gt;
        &lt;td&gt;t2 data10&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;t2 data5&lt;/td&gt;
        &lt;td&gt;t2 data5&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;t2 data6&lt;/td&gt;
        &lt;td&gt;t2 data6&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;t2 data7&lt;/td&gt;
        &lt;td&gt;t2 data7&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;t2 data8&lt;/td&gt;
        &lt;td&gt;t2 data8&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;t2 data9&lt;/td&gt;
        &lt;td&gt;t2 data9&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;t2 data10&lt;/td&gt;
        &lt;td&gt;t2 data10&lt;/td&gt;
      &lt;/tr&gt;
      &lt;thead&gt;
        &lt;tr&gt;
          &lt;th&gt;t2 col footer&lt;/th&gt;
          &lt;th&gt;t2 col footer&lt;/th&gt;
        &lt;/tr&gt;
      &lt;/thead&gt;
    &lt;/tbody&gt;
  &lt;/table&gt;</code></pre>
  </div>
  </div>
  </p>