Setting table height appears to adds margin-top instead - html

Question

I'm trying to make a scrollable table, with the table height set. However, when I try to set the height, it adds a margin on top of the table instead of adjusting the height of the actual table.
I want only the table to scroll (Not the date above it) and eventually hope to make the column titles sticky.
You can see what I'm talking about here: http://jsfiddle.net/m5s87hb0/
This is my html:
<div class='box-style-1' id='timesheet-box'>
<span class='box-title'>Time Sheet<span>
<div id='table-wrapper'>
<table id='timesheet'>
<thead>
<th id='timesheet-date' colspan="5">00/00/0000 - 00/00/0000</th>
</thead>
<div id='table-scroll'>
<tbody>
<tr id='col-titles'>
<th>Jobs</th>
<th>Task</th>
<th>In</th>
<th>Out</th>
<th>Hours</th>
</tr>
<tr>
<td>Job 1</td>
<td>Task 1</td>
<td>00:00</td>
<td>00:00</td>
<td>0</td>
</tr>
<tr>
<td>Job 2</td>
<td>Task 2</td>
<td>00:00</td>
<td>00:00</td>
<td>0</td>
</tr>
<tr>
<td>Job 3</td>
<td>Task 3</td>
<td>00:00</td>
<td>00:00</td>
<td>0</td>
</tr>
<tr>
<td>Job 4</td>
<td>Task 4</td>
<td>00:00</td>
<td>00:00</td>
<td>0</td>
</tr>
<tr>
<td>Job 5</td>
<td>Task 5</td>
<td>00:00</td>
<td>00:00</td>
<td>0</td>
</tr>
</tbody>
</div>
</table>
</div>
</div>
Css:
.box-style-1 {
clear: both;
position: absolute;
display: block;
border: 1px solid black;
border-radius: 10px;
white-space: nowrap;
background: #D1D3D4;
overflow: hidden;
}
.box-title {
display: block;
background: #D15F32;
padding: 0px;
border-radius: 10px 10px 0px 0px;
text-align: center;
font-weight: ;
color: #fff;
font-size: 25px;
margin-bottom: 0px;
height: 40px;
padding-top: 10px;
}
#timesheet-box {
width: 78%;
height: 300px;
position: absolute;
display: block;
margin-left: 7%;
}
#table-wrapper {
position: relative;
height: 250px;
}
#timesheet {
width: 100%;
margin-top: 10px;
color: #3a3a3c;
height: 100%;
}
#timesheet-date {
padding: 0px;
margin-top: 50px;
}
#table-scroll {
position: relative;
display: block;
height: 100px;
overflow: scroll;
}
tbody {
}
th, td {
border: 1px solid #3a3a3c;
font-style: normal;
font-size: 22px;
height: 40px;
}
table {
border-collapse: collapse;
}

Answer 1

You can't have the div around tbody, move it around the table and your table will scroll
<div id='table-scroll'>
<table id='timesheet'>
...
</table>
</div>
edit
http://codepen.io/anon/pen/VLmqbK
To fix the header, you must add a position absolute to the header and fix its height. The rest of your table will go up so add a padding-top to the around div for this height value to fix it. Also add a background to hide scrolled content below.
thead {
position:absolute;
top:0px;
height:40px;
background:white;
}
#table-scroll {
display: block;
height: 200px;
overflow-y: scroll;
padding-top:23px; /* I don't know where the 17 other px come from in your code but who cares :) */
}

Answer 2

I solved the problem by moving the date out of the table.