Fixed header scrolling table with multiple tbody elements

I'm having trouble achieving a fixed header scroll-able table which contains multiple tbody elements.

Basically, I'd like to put a table inside a container element of fixed size. I'd then like to scroll through any overflowing table elements, without the headers moving.

The table needs to be styled with twitter-bootstrap, but I'm not sure that's relevant to the question

Hope that makes sense!

Here is a fiddle (obviously not quite working as intended yet) https://jsfiddle.net/whbbwv7g/

And the code:

<div id="tableContainer">
    <table class="table table-bordered table-hover">
        <thead>
            <tr>
                <th>Head 1</th>
                <th>Head 2</th>
                <th>Head 3</th>
                <th>Head 4</th>
            </tr>
        </thead>


            <tbody>            
                <tr>
                    <td>Test</td>
                    <td>Test</td>
                    <td>Test</td>
                    <td>Test</td>                
                </tr>
                <tr>
                    <td>Test</td>
                    <td>Test</td>
                    <td>Test</td>
                    <td>Test</td> 
                </tr>
                <tr>
                    <td>Test</td>
                    <td>Test</td>
                    <td>Test</td>
                    <td>Test</td> 
                </tr>
            </tbody>
            <tbody>            
                <tr>
                    <td>Test</td>
                    <td>Test</td>
                    <td>Test</td>
                    <td>Test</td>                
                </tr>
                <tr>
                    <td>Test</td>
                    <td>Test</td>
                    <td>Test</td>
                    <td>Test</td> 
                </tr>
                <tr>
                    <td>Test</td>
                    <td>Test</td>
                    <td>Test</td>
                    <td>Test</td> 
                </tr>
            </tbody>
            <tbody>            
                <tr>
                    <td>Test</td>
                    <td>Test</td>
                    <td>Test</td>
                    <td>Test</td>                
                </tr>
                <tr>
                    <td>Test</td>
                    <td>Test</td>
                    <td>Test</td>
                    <td>Test</td> 
                </tr>
                <tr>
                    <td>Test</td>
                    <td>Test</td>
                    <td>Test</td>
                    <td>Test</td> 
                </tr>
            </tbody>


    </table> 
</div>

The only css is:

#tableContainer {
    width: 300px;
    height:150px;
}