<h1 class="intro">Table with fixed header and footer (experimental use at own risk)</h1>
<p class="intro"><a href="https://codepen.io/paulobrien/pen/LjRNXa" target="_blank">See other example with only 1 clone needed</a>
<p class="intro">The table is cloned twice and absolutely placed on top of the table. The first clone has the body and footer hidden and the second clone has the header and body hidden. The tables are placed at top:0 and bottom:0 respectively.</p>
<p class="intro">To avoid the issue with scrollbars eating up space the absolutely placed tables are positioned within a holding div that already has scrollbars and thus will account for the different scrollbar widths of browsers, or indeed if scrollbars are only overlaid when needed as in Mac systems.</p>
<div id="table-scroll" class="table-scroll">
  <div id="faux-table" class="faux-table" aria="hidden"></div>
  <div class="table-wrap">
    <table id="main-table" class="main-table">
      <thead>
        <tr>
          <th scope="col">Header 1</th>
          <th scope="col">Header 2</th>
          <th scope="col">Header 3 with longer content that wraps as required</th>
          <th scope="col">Header 4</th>
          <th scope="col">Header 5</th>
          <th scope="col">Header 6</th>
          <th scope="col">Header 7</th>
          <th scope="col">Header 8</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th>Left Column</th>
          <td>Cell content<br>
            test </td>
          <td><a href="#">Cell content longer</a></td>
          <td>Cell content with more content and more content</td>
          <td>Cell content</td>
          <td>Cell content</td>
          <td>Cell content</td>
          <td>Cell content</td>
        </tr>
        <tr>
          <th>Left Column</th>
          <td>Cell content</td>
          <td>Cell content longer</td>
          <td>Cell content</td>
          <td>Cell content</td>
          <td>Cell content</td>
          <td>Cell content</td>
          <td>Cell content</td>
        </tr>
        <tr>
          <th>Left Column</th>
          <td>Cell content</td>
          <td>Cell content longer</td>
          <td>Cell content</td>
          <td>Cell content</td>
          <td>Cell content</td>
          <td>Cell content</td>
          <td>Cell content</td>
        </tr>
        <tr>
          <th>Left Column</th>
          <td>Cell content</td>
          <td>Cell content longer</td>
          <td>Cell content</td>
          <td>Cell content</td>
          <td>Cell content</td>
          <td>Cell content</td>
          <td>Cell content</td>
        </tr>
        <tr>
          <th>Left Column</th>
          <td>Cell content</td>
          <td>Cell content longer</td>
          <td>Cell content</td>
          <td>Cell content</td>
          <td>Cell content</td>
          <td>Cell content</td>
          <td>Cell content</td>
        </tr>
        <tr>
          <th>Left Column</th>
          <td>Cell content</td>
          <td>Cell content longer</td>
          <td>Cell content</td>
          <td>Cell content</td>
          <td>Cell content</td>
          <td>Cell content</td>
          <td>Cell content</td>
        </tr>
        <tr>
          <th>Left Column</th>
          <td>Cell content</td>
          <td>Cell content longer</td>
          <td>Cell content</td>
          <td>Cell content</td>
          <td>Cell content</td>
          <td>Cell content</td>
          <td>Cell content</td>
        </tr>
        <tr>
          <th>Left Column</th>
          <td>Cell content</td>
          <td>Cell content longer</td>
          <td>Cell content</td>
          <td>Cell content</td>
          <td>Cell content</td>
          <td>Cell content</td>
          <td>Cell content</td>
        </tr>
        <tr>
          <th>Left Column</th>
          <td>Cell content</td>
          <td>Cell content longer</td>
          <td>Cell content</td>
          <td>Cell content</td>
          <td>Cell content</td>
          <td>Cell content</td>
          <td>Cell content</td>
        </tr>
        <tr>
          <th>Left Column</th>
          <td>Cell content</td>
          <td>Cell content longer</td>
          <td>Cell content</td>
          <td>Cell content</td>
          <td>Cell content</td>
          <td>Cell content</td>
          <td>Cell content</td>
        </tr>
        <tr>
          <th>Left Column</th>
          <td>Cell content</td>
          <td>Cell content longer</td>
          <td>Cell content</td>
          <td>Cell content</td>
          <td>Cell content</td>
          <td>Cell content</td>
          <td>Cell content</td>
        </tr>
        <tr>
          <th>Left Column</th>
          <td>Cell content</td>
          <td>Cell content longer</td>
          <td>Cell content</td>
          <td>Cell content</td>
          <td>Cell content</td>
          <td>Cell content</td>
          <td>Cell content</td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <th>Footer 1</th>
          <td>Footer 2</td>
          <td>Footer 3</td>
          <td>Footer 4</td>
          <td>Footer 5</td>
          <td>Footer 6</td>
          <td>Footer 7</td>
          <td>Footer 8</td>
        </tr>
      </tfoot>
    </table>
  </div>
</div>

<p class="intro">Works in modern browsers (IE11+, Edge, Chrome, Safari and Firefox). Probably not a good idea for massive or complicated tables.</p>
.intro {
	max-width:1280px;
	margin:1em auto;
}
.table-scroll {
	position: relative;
	max-width: 1280px;
	width:100%;
	margin: auto;
	display:table;
}
.table-wrap {
	width: 100%;
	display:block;
	height: 300px;
	overflow: auto;
	position:relative;
	z-index:1;
}
.table-scroll table {
	width: 100%;
	margin: auto;
	border-collapse: separate;
	border-spacing: 0;
}
.table-scroll th, .table-scroll td {
	padding: 5px 10px;
	border: 1px solid #000;
	background: #fff;
	vertical-align: top;
}
.faux-table table {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	pointer-events: none;
}
.faux-table table + table {
	top: auto;
	bottom: 0;
}
.faux-table table tbody, .faux-table  tfoot {
	visibility: hidden;
	border-color: transparent;
}
.faux-table table + table thead {
	visibility: hidden;
	border-color: transparent;
}
.faux-table table + table  tfoot{
	visibility:visible;
	border-color:#000;
}
.faux-table thead th, .faux-table tfoot th, .faux-table tfoot td {
	background: #ccc;
}
.faux-table {
	position:absolute;
	top:0;
	right:0;
	left:0;
	bottom:0;
	overflow-y:scroll;
}
.faux-table thead, .faux-table tfoot, .faux-table thead th, .faux-table tfoot th, .faux-table tfoot td {
	position:relative;
	z-index:2;
}
/*
//  jquery equivalent
jQuery(document).ready(function() {
   jQuery(".main-table").clone(true).appendTo('#table-scroll .faux-table').addClass('clone');
   jQuery(".main-table.clone").clone(true).appendTo('#table-scroll .faux-table').addClass('clone2'); 
 });
*/
(function() {
  var fauxTable = document.getElementById("faux-table");
  var mainTable = document.getElementById("main-table");
  var clonedElement = mainTable.cloneNode(true);
  var clonedElement2 = mainTable.cloneNode(true);
  clonedElement.id = "";
  clonedElement2.id = "";
  fauxTable.appendChild(clonedElement);
  fauxTable.appendChild(clonedElement2);
})();

Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js