Can't align thead and tbody in scrollable table

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