<div id="table-scroll" class="table-scroll">
  <div id="t1" class="scroll-wrap"></div>
  <div class="inner-wrap t2">
    <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</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>First 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 Cell </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>First 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 Cell </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>First 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 Cell </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 id="t3" class="scroll-wrap"></div>
</div>
/* this demo is for the table-layout:auto algorithm. If you are using the table-layout:fixed algorithm then there are other methods to fix the header without js.*/

.intro {
	max-width:1280px;
	margin:1em auto;
}
.table-scroll {
	position: relative;
	max-width: 1280px;
	width:100%;
	margin: auto;
	display:table;
	background:#ccc;
	border:1px solid #000;
}
.inner-wrap {
	width: 100%;
	display:block;
	overflow: auto;
	overflow-y:scroll;
	position:relative;
	z-index:1;
	height:300px;
	border-top:1px solid #000;
	border-bottom:1px solid #000;
  background:#000;
}
table.t2 {
	height:300px;
}
.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;
}
.table-scroll thead th, .table-scroll thead td, .table-scroll tfoot td, .table-scroll tfoot th {
	background:#ccc;
}
.table-scroll thead th:last-child, .table-scroll tfoot td:last-child {
	border-right:transparent;
}
.table-scroll thead th, .table-scroll thead td, .table-scroll tfoot th, .table-scroll tfoot td {
	border-top:transparent;
	border-bottom:transparent;
}
.scroll-wrap {
	overflow-y:scroll;
	visibility:hidden;
}
.scroll-wrap table {
	visibility:visible
}
#t1 tbody, #t1 tfoot, #t1 tbody th, #t1 tbody td, #t1 tfoot th, #t1 tfoot td, .t2 thead, .t2 tfoot, .t2 thead th, .t2 thead td, .t2 tfoot th, .t2 tfoot td, #t3 tbody, #t3 thead, #t3 tbody th, #t3 tbody td, #t3 thead th, #t3 thead td {
	padding-top:0;
	padding-bottom:0;
	border-top:none;
	border-bottom:none;
	line-height:0;
	visibility:hidden;
}
a:focus {
	background:red
}/* testing links*/
(function() {
  var fauxTable1 = document.getElementById("t1");
  var fauxTable2 = document.getElementById("t3");
  var mainTable = document.getElementById("main-table");
  var clonedElement1 = mainTable.cloneNode(true);
  var clonedElement2 = mainTable.cloneNode(true);
  clonedElement1.id = "";
  fauxTable1.appendChild(clonedElement1);
  clonedElement2.id = "";
  fauxTable2.appendChild(clonedElement2);
})();
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.