Above code snippet might already work totally fine for you but if you happen to have the same problem as me, you want to change it ever so slightly. In `.tableFixHead` you want to add `padding-top: o;`.
<!-- begin snippet: js hide: false console: true babel: null -->
<!-- language: lang-css -->
.tableFixHead { overflow: auto; height: 100px; padding-top: 0; }
.tableFixHead thead th { position: sticky; top: 0; z-index: 1; }
/* Just common table stuff. Really. */
table { border-collapse: collapse; width: 100%; }
th, td { padding: 8px 16px; }
th { background:#eee; }
<!-- language: lang-html -->
<div class="tableFixHead">
<table>
<thead>
<tr><th>TH 1</th><th>TH 2</th></tr>
</thead>
<tbody>
<tr><td>A1</td><td>A2</td></tr>
<tr><td>B1</td><td>B2</td></tr>
<tr><td>C1</td><td>C2</td></tr>
<tr><td>D1</td><td>D2</td></tr>
<tr><td>E1</td><td>E2</td></tr>
</tbody>
</table>
</div>
<!-- end snippet -->
Running this code here on stackoverflow will likely show no difference. But depending on the position of your table and it's interaction with other objects this might be the solution you've been looking for.
This way the table will begin with your header and not a little bit (=the padding) above it.
Depending on your underlying CSS `border-top` or `margin-top` might be your solution. I'm happy to be corrected on this, if it can't be either of them.
(I'm new to actually contributing to stackoverflow, so if there is a better way to add this bit of information I'm happy to learn.)
# Fixed table head - CSS-only
Simply `position: sticky; top: 0;` your `th` elements. ***(Chrome, FF, Edge)***
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.tableFixHead { overflow: auto; height: 100px; }
.tableFixHead thead th { position: sticky; top: 0; z-index: 1; }
/* Just common table stuff. Really. */
table { border-collapse: collapse; width: 100%; }
th, td { padding: 8px 16px; }
th { background:#eee; }
<!-- language: lang-html -->
<div class="tableFixHead">
<table>
<thead>
<tr><th>TH 1</th><th>TH 2</th></tr>
</thead>
<tbody>
<tr><td>A1</td><td>A2</td></tr>
<tr><td>B1</td><td>B2</td></tr>
<tr><td>C1</td><td>C2</td></tr>
<tr><td>D1</td><td>D2</td></tr>
<tr><td>E1</td><td>E2</td></tr>
</tbody>
</table>
</div>
<!-- end snippet -->
For both [sticky vertical TH and horizontal TH columns (inside `TBODY`)][1]:
```css
.tableFixHead { overflow: auto; height: 100px; width: 240px; }
.tableFixHead thead th { position: sticky; top: 0; z-index: 1; }
.tableFixHead tbody th { position: sticky; left: 0; }
```
<!-- begin snippet: js hide: true console: true babel: false -->
<!-- language: lang-css -->
.tableFixHead { overflow: auto; height: 100px; width: 240px; }
.tableFixHead thead th { position: sticky; top: 0; z-index: 1; }
.tableFixHead tbody th { position: sticky; left: 0; }
/* Just common table stuff. Really. */
table { border-collapse: collapse; width: 100%; }
th, td { padding: 8px 16px; white-space: nowrap; }
th { background:#eee; }
<!-- language: lang-html -->
<div class="tableFixHead">
<table>
<thead>
<tr><th></th><th>TH 1</th><th>TH 2</th></tr>
</thead>
<tbody>
<tr><th>Foo</th><td>Some long text lorem ipsum</td><td>Dolor sit amet</td></tr>
<tr><th>Bar</th><td>B1</td><td>B2</td></tr>
<tr><th>Baz</th><td>C1</td><td>C2</td></tr>
<tr><th>Fuz</th><td>D1</td><td>D2</td></tr>
<tr><th>Zup</th><td>E1</td><td>E2</td></tr>
</tbody>
</table>
</div>
<!-- end snippet -->
## TH borders problem fix
Since `border` cannot be painted properly on a translated `TH` element,
to recreate and render *"borders"* use the `box-shadow` property:
```css
/* Borders (if you need them) */
.tableFixHead,
.tableFixHead td {
box-shadow: inset 1px -1px #000;
}
.tableFixHead th {
box-shadow: inset 1px 1px #000, 0 1px #000;
}
```
<!-- begin snippet: js hide: true console: true babel: false -->
<!-- language: lang-css -->
.tableFixHead { overflow: auto; height: 100px; }
.tableFixHead thead th { position: sticky; top: 0; z-index: 1; }
/* Just common table stuff. Really. */
table { border-collapse: collapse; width: 100%; }
th, td { padding: 8px 16px; }
th { background:#eee; }
/* Borders (if you need them) */
.tableFixHead,
.tableFixHead td {
box-shadow: inset 1px -1px #000;
}
.tableFixHead th {
box-shadow: inset 1px 1px #000, 0 1px #000;
}
<!-- language: lang-html -->
<div class="tableFixHead">
<table>
<thead>
<tr><th>TH 1</th><th>TH 2</th></tr>
</thead>
<tbody>
<tr><td>A1</td><td>A2</td></tr>
<tr><td>B1</td><td>B2</td></tr>
<tr><td>C1</td><td>C2</td></tr>
<tr><td>D1</td><td>D2</td></tr>
<tr><td>E1</td><td>E2</td></tr>
</tbody>
</table>
</div>
<!-- end snippet -->
## TH sticky not working fix
Ensure that parent-elements of "`th`" element, at least till `table` element (inclusive), do **Not** set `overflow` related styles (e.g. `overflow`, `overflow-x`, `overflow-y`).
>For more see stackoverflow.com/[Why is 'position: sticky' not working?](https://stackoverflow.com/a/54806576/8740349)
<hr>
# Fixed table head - using JavaScript
For **ancient browsers**, you can use a bit of JS and **translateY** the `th` elements
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
// Fix table head example:
function tableFixHead(evt) {
const el = evt.currentTarget,
sT = el.scrollTop;
el.querySelectorAll("thead th").forEach(th =>
th.style.transform = `translateY(${sT}px)`
);
}
document.querySelectorAll(".tableFixHead").forEach(el =>
el.addEventListener("scroll", tableFixHead)
);
<!-- language: lang-css -->
.tableFixHead {
overflow-y: auto;
height: 100px;
}
/* Just common table stuff. */
table {
border-collapse: collapse;
width: 100%;
}
th,
td {
padding: 8px 16px;
}
th {
background: #eee;
}
<!-- language: lang-html -->
<div class="tableFixHead">
<table>
<thead>
<tr><th>TH 1</th><th>TH 2</th></tr>
</thead>
<tbody>
<tr><td>A1</td><td>A2</td></tr>
<tr><td>B1</td><td>B2</td></tr>
<tr><td>C1</td><td>C2</td></tr>
<tr><td>D1</td><td>D2</td></tr>
<tr><td>E1</td><td>E2</td></tr>
</tbody>
</table>
</div>
<!-- end snippet -->
[1]: https://jsfiddle.net/RokoCB/863s5mt4/2/
