<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);
})();
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.