Shift N' Tab Shift N' Tab - 4 months ago 22
CSS Question

How to force or bring vertical scroll bar to front in html css

I would like to bring this

vertical scroll bar
to the front. Here is the image.
I do not know how to set it.

enter image description here

UPDATE



I did a work around but the wrong part is that the items text element are not hidding behind the header. Here is my fiddle



.container
{
position: absolute;
background: lightblue;
height: 100%;
width: 90%;
}

.table-header
{
position: absolute;
height: 25px;
width: 100%;
background: red;
}

.table-body
{
position: relative;
padding-top: 25px;
overflow: auto;
height: 30%;
}

.table
{
table-layout: fixed;
}

<div class="container">
<div class="table-header">
<table class="table">
<thead>
<th>
Header
</th>
</thead>
</table>
</div>
<div class="table-body">
<table class="table">
<tbody>
<tr>
<td>
Item 1
</td>
</tr>
<tr>
<td>
Item 2
</td>
</tr>
<tr>
<td>
Item 3
</td>
</tr>
<tr>
<td>
Item 4
</td>
</tr>
<tr>
<td>
Item 5
</td>
</tr>
<tr>
<td>
Item 6
</td>
</tr>
<tr>
<td>
Item 7
</td>
</tr>
</tbody>
</table>
</div>
</div>




Answer

As the scrollbar is on your table, there's no way you can have the scrollbar on top of the table header, and your table below the table header. Your best bet is to have it offset from top the height of the header:

So change your current CSS for your table body:

.table-body
{
    position: relative;
    overflow: auto;
    height: 30%;
    margin-top: 25px;
}

See this fiddle.