tbody vertical scroll with sticky column - html

Question

I have a table with a sticky column (see jsfiddle below). But I´m trying to have a vertical scroll just on the table body so the headers are always visible and the height of tbody should be fixed. How can I do this?
body {
font: 16px Calibri;
}
table {
border-collapse: separate;
border-top: 3px solid grey;
}
td,th {
margin: 0;
border: 3px solid grey;
border-top-width: 0px;
white-space: nowrap;
}
div {
width: 600px;
overflow-x: scroll;
margin-left: 5em;
overflow-y: visible;
padding-bottom: 1px;
}
.headcol {
position: absolute;
width: 5em;
left: 0;
top: auto;
border-right: 0px none black;
border-top-width: 3px;
/*only relevant for first row*/
margin-top: -3px;
/*compensate for top border*/
}
.long {
background: yellow;
letter-spacing: 1em;
}
<div>
<table>
<thead>
<tr>
<th class="headcol">sticky col</th>
<th>col2</th>
<th>col3</th>
</tr>
</thead>
<tbody>
<tr>
<td class="headcol">1</td>
<td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
<td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
</tr>
<tr>
<td class="headcol">2</td>
<td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
<td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
</tr>
<tr>
<td class="headcol">3</td>
<td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
<td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
</tr>
<tr>
<td class="headcol">4</td>
<td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
<td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
</tr>
<tr>
<td class="headcol">5</td>
<td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
<td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
</tr>
<tr>
<td class="headcol">6</td>
<td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
<td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
</tr>
<tr>
<td class="headcol">7</td>
<td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
<td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
</tr>
<tr>
<td class="headcol">8</td>
<td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
<td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
</tr>
<tr>
<td class="headcol">9</td>
<td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
<td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
</tr>
</tbody>
</table>
</div>
The end result should be similar to this:
http://demos.telerik.com/kendo-ui/grid/frozen-columns

Answer 1

You will need to set the position to fixed of the cell that you would like to remain fixed during vertical scroll.
.headcol {
position:fixed;
}