I am currently facing a challenge involving fixing the first and last column (.headcol, .lastcol) in a horizontally scrolling table, ensuring they always align to the left & right of the visible panel.
My understanding was that position: absolute elements would be positioned relative to the first parent element with position: relative. However, in this case, they seem to position themselves relative to the scrollable element (one div up).
If you scroll right in this fiddle: http://jsfiddle.net/benkeen/hav6eLst/, you will notice the issue.
My goal is to keep the white first column and the red last column in place while only scrolling the yellow content in between.
Below is the code snippet:
#top {
width: calc(100% - 200px);
margin-left: 100px;
margin-right: 100px;
overflow-x: scroll;
overflow-y: visible;
}
#pos-relative {
position: relative;
}
table {
border-collapse: separate;
margin-left: 100px;
}
td,
th {
margin: 0;
border: 3px solid grey;
border-top-width: 0px;
white-space: nowrap;
}
.headcol {
position: absolute;
width: 100px;
left: 0;
border-right: 0px none black;
border-top-width: 3px;
margin-top: -3px;
background-color: white;
}
.headcol:before {
content: 'Row ';
}
.lastcol {
position: absolute;
right: 0;
width: 100px;
background-color: red;
}
.long {
background: yellow;
letter-spacing: 1em;
}<div id="top">
<div id="pos-relative">
<table>
<tr>
<th class="headcol">1</th>
<td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
<td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
<th class="lastcol">x</th>
</tr>
<tr>
<th class="headcol">2</th>
<td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
<td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
<th class="lastcol">x</th>
</tr>
... more rows
</table>
</div>
</div>Could it be that I am approaching this problem from the wrong angle? Maybe this is not achievable with tables.