There are numerous solutions available for creating a table with frozen columns and scrollable content, such as:
how do I create an HTML table with fixed/frozen left column and scrollable body?
However, my specific requirement is to have the scroll bar on the page (body) itself rather than on the table or any surrounding container.
Edit- It's just a simple HTML table that exceeds the display size, requiring a horizontal scroll. Placing the horizontal scroll on the body of the page eliminates the need for users to scroll to the bottom before accessing it horizontally.
.stickyCol2 tr th:nth-child(1),
.stickyCol2 tr td:nth-child(1){
position: absolute;
width: 50px;
left: 15px;
top: auto;
background-color: #fff;
}
.stickyCol2 tr th:nth-child(2),
.stickyCol2 tr td:nth-child(2){
position: absolute;
width: 60px;
left: 86px;
top: auto;
background-color: #fff;
} <div class="stickyCol2">
<table>
<thead>
<tr>
<th>item 1</th>
<th>item 2</th>
<th>item 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>item 1</td>
<td>item 2</td>
<td>item 3</td>
</tr>
</tbody>
</table>
</div>Check out the js fiddle version here: https://jsfiddle.net/uthz6c24/1/