Can't align thead and tbody in scrollable table - html

Question

I have this scrollable table that sometimes Isn't full, like this:
2 things happening here: the background disappears and the th columns are just not aligned.
I was messing around with a demo I found somewhere and I read that display: table-header-group actually aligns the tbody with the header, the problem here is that if I use that then the scroll stops working: here's what I have so far:
.scroll {
/* Optional */
/* border-collapse: collapse; */
border-spacing: 0;
font-family: Raleway;
padding-top: 15px;
padding-left: 15px;
border-collapse: collapse;
color: #005693;
border-radius: 10px;
font-size: 12px;
text-align: center;
}
.scroll tbody, .scroll thead {
display:block;
}
thead tr th {
height: 30px;
line-height: 30px;
/* text-align: left; */
}
.scroll tbody {
height: 100px;
overflow-y: auto;
overflow-x: hidden;
}
.scroll tbody {
border-top: 2px solid black;
}
.scroll tbody td, thead th {
/* width: 20%; */
/* Optional */
border-right: 1px solid black;
/* white-space: nowrap; */
}
.scroll tbody td:last-child, thead th:last-child {
border-right: none;
}
<table class="scroll">
<thead>
<tr>
<th>Job</th>
<th>Client ID</th>
<th>Company</th>
<th>Representative</th>
<th>Status</th>
<th>Report</th>
<th>Recieved</th>
<th>Delivered</th>
<th>Quotation</th>
</tr>
</thead>
<tbody>
<tr>
<td>Content 1</td>
<td>Content 2</td>
<td>Content 3</td>
<td>Content 4</td>
<td>Content 5</td>
<td>Content 6</td>
<td>Content 7</td>
<td>Content 8</td>
<td></td>
</tr>
<tr>
<td>Content 1</td>
<td>Content 2</td>
<td>Content 3</td>
<td>Content 4</td>
<td>Content 5</td>
<td>Content 6</td>
<td>Content 7</td>
<td>Content 8</td>
<td></td>
</tr>
<tr>
<td>Content 1</td>
<td>Content 2</td>
<td>Content 3</td>
<td>Content 4</td>
<td>Content 5</td>
<td>Content 6</td>
<td>Content 7</td>
<td>Content 8</td>
<td></td>
</tr>
<tr>
<td>Content 1</td>
<td>Content 2</td>
<td>Content 3</td>
<td>Content 4</td>
<td>Content 5</td>
<td>Content 6</td>
<td>Content 7</td>
<td></td>
<td></td>
</tr>
<tr>
<td>Content 1</td>
<td>Content 2</td>
<td>Content 3</td>
<td>Content 4</td>
<td>Content 5</td>
<td>Content 6</td>
<td>Content 7</td>
<td></td>
<td></td>
</tr>
<tr>
<td>Content 1</td>
<td>Content 2</td>
<td>Content 3</td>
<td>Content 4</td>
<td>Content 5</td>
<td>Content 6</td>
<td>Content 7</td>
<td></td>
<td></td>
</tr>
<tr>
<td>Content 1</td>
<td>Content 2</td>
<td>Content 3</td>
<td>Content 4</td>
<td>Content 5</td>
<td>Content 6</td>
<td>Content 7</td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
How can I align the tbody with the thead having in account that content 8 and 9 are not always used? Also of course keeping the scroll.
Here's the fiddle http://jsfiddle.net/CrSpu/4574/

Answer 1

in case anybody has the same issue i found a great solution, here's a fiddle of it. if you want to add rows just keep adding the +td css and your preferred sizes :D
http://jsbin.com/bagaro/1/edit?html,output