Keep a horizontal table scrollbar always in view - html

Question

I got a table on my webpage, and for low resolutions, it has a horizontal scrollbar. However, the scrollbar is fixed on the bottom of the table, and with many entries, it's a bit unnecessary to always scroll down, scroll left / right and scroll back to where we were again.
My table CSS looks like that:
th,
td {
white-space: nowrap;
}
table {
table-layout: auto;
}
How is it possible to have the scrollbar always appear at the bottom of the screen, if the bottom of the table is out of view? Most questions I've found were more like "how to always show the scrollbar, even if it isn't needed", but still only at the bottom of the table.
Thanks in advance!

Answer 1

You could rather wrap your table in a div with overflow:auto property and make sure the bottom edge of this container never leaves viewport.
In this example the table wrap has a maximum height of 80vh.
body {
font-size: 1em;
font-family: 'Segoe UI';
margin: 1em;
}
.main {
display: flex;
flex-direction: column;
height: 80vh;
resize: both;
position: relative;
overflow: auto;
border: 1px solid red;
padding:0 1em 1em 0;
}
.main:after {
content: '';
display:block;
border: 1em solid #eee;
border-top-color: transparent;
border-left-color: transparent;
position:absolute;
bottom:0;
right:0;
}
table {
border-collapse: collapse;
white-space: nowrap;
}
th {
background-color: #eee;
}
thead {
position: sticky;
top: 0
}
th,
td {
vertical-align: top;
text-align: left;
padding-right: 0.3em;
border-bottom: 1px solid #000;
border-right: 4px solid #fff;
}
.table-wrp {
position: relative;
overflow: auto;
padding: 0 1em 1em 0;
}
<div class="main">
<div class="table-wrp">
<table>
<thead>
<tr>
<th>Col 1</th>
<th>Col 2</th>
<th>Col 3</th>
<th>Col 4</th>
<th>Col 5</th>
</tr>
</thead>
<tbody>
<tr>
<td> </td>
<td>Knocky</td>
<td>Flor</td>
<td>Ella</td>
<td>Juan</td>
</tr>
<tr>
<td>Breed</td>
<td>Jack Russell</td>
<td>Poodle</td>
<td>Streetdog</td>
<td>Cocker Spaniel</td>
</tr>
<tr>
<td>Age</td>
<td>16</td>
<td>9</td>
<td>10</td>
<td>5</td>
</tr>
<tr>
<td>Owner</td>
<td>Mother-in-law</td>
<td>Me</td>
<td>Me</td>
<td>Sister-in-law</td>
</tr>
<tr>
<td>Eating Habits</td>
<td>Eats everyone's leftovers</td>
<td>Nibbles at food</td>
<td>Hearty eater</td>
<td>Will eat till he explodes</td>
</tr>
<tr>
<td> </td>
<td>Knocky</td>
<td>Flor</td>
<td>Ella</td>
<td>Juan</td>
</tr>
<tr>
<td>Breed</td>
<td>Jack Russell</td>
<td>Poodle</td>
<td>Streetdog</td>
<td>Cocker Spaniel</td>
</tr>
<tr>
<td>Age</td>
<td>16</td>
<td>9</td>
<td>10</td>
<td>5</td>
</tr>
<tr>
<td>Owner</td>
<td>Mother-in-law</td>
<td>Me</td>
<td>Me</td>
<td>Sister-in-law</td>
</tr>
<tr>
<td>Eating Habits</td>
<td>Eats everyone's leftovers</td>
<td>Nibbles at food</td>
<td>Hearty eater</td>
<td>Will eat till he explodes</td>
</tr>
<tr>
<td> </td>
<td>Knocky</td>
<td>Flor</td>
<td>Ella</td>
<td>Juan</td>
</tr>
<tr>
<td>Breed</td>
<td>Jack Russell</td>
<td>Poodle</td>
<td>Streetdog</td>
<td>Cocker Spaniel</td>
</tr>
<tr>
<td>Age</td>
<td>16</td>
<td>9</td>
<td>10</td>
<td>5</td>
</tr>
<tr>
<td>Owner</td>
<td>Mother-in-law</td>
<td>Me</td>
<td>Me</td>
<td>Sister-in-law</td>
</tr>
<tr>
<td>Eating Habits</td>
<td>Eats everyone's leftovers</td>
<td>Nibbles at food</td>
<td>Hearty eater</td>
<td>Will eat till he explodes</td>
</tr>
</tbody>
</table>
</div>
</div>

Answer 2

try this :
table {
overflow: auto;
}
or
table {
overflow: scroll;
}

Answer 3

You could use floating-scroll jquery plugin for this.