Bootstrap Freeze thead on table

I am trying to freeze my first row in my html table (thead) but when I try the following CSS code:

table {
    width: 100% !important;
}

thead, tbody {
    display: block;
}

tr:after {
    content: '';
    display: block;
    visibility: hidden;
    clear: both;
}

thead th {
    height: 30px;
}

tbody {
    height: 500px;
    overflow-y: auto;
}

The thead is not the same size as the tbody. the tbody is scrollable to the thead is in a fixed position, but not the same, the tr's are bunched up together. Here is my HTML:

<table id="MVCGridTable_Grid" class="table table-striped table-bordered">
    <thead>
        <tr>
            <th>aaa</th>
            <th>aaa</th>
            <th>aaa</th>
            <th>aaa</th>
            <th>aaa</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                aaa
            </td>
            <td>
                aaa
            </td>
            <td>
                aaa
            </td>
            <td>
                aaa
            </td>
            <td>
                aaa
            </td>
        </tr>
        <tr>
            <td>
                aaa
            </td>
            <td>
                aaa
            </td>
            <td>
                aaa
            </td>
            <td>
                aaa
            </td>
            <td>
                aaa
            </td>
        </tr>
        <tr>
            <td>
                aaa
            </td>
            <td>
                aaa
            </td>
            <td>
                aaa
            </td>
            <td>
                aaa
            </td>
            <td>
                aaa
            </td>
        </tr>
        <tr>
            <td>
                aaa
            </td>
            <td>
                aaa
            </td>
            <td>
                aaa
            </td>
            <td>
                aaa
            </td>
            <td>
                aaa
            </td>
        </tr>
        <tr>
            <td>
                aaa
            </td>
            <td>
                aaa
            </td>
            <td>
                aaa
            </td>
            <td>
                aaa
            </td>
            <td>
                aaa
            </td>
        </tr>
    </tbody>
</table>

Here is the DEMO I tried to put together, but the Bootstrap I added appears not to be working so excuse the lack of styling:

This is the result I get: