keep table headers still when scrolling a table?

Question

I have the following table which inside a model dialog and I have applied some css to, so that the head stays in the same position when its being scrolled.

however after I load the page the columns are pushed to the left, these 5 columns should appear under the headers.

also the underlying page has been pushed to the left of the page also.

               <style>
                    .tblSearchMedia1 tbody {
                    height: 100px;
                    overflow: auto;
                        }
                    .tblSearchMedia1 td {
                    padding: 3px 10px;
                    }

                    .tblSearchMedia1 thead > tr, tbody{
                    display:block;

                    }
                </style>


                <table class="tblSearchMedia1">
                <thead>
                    <tr>
                        <th> Region </th>
                        <th> Subregion </th>
                        <th> Country </th>
                        <th> Media Type </th>
                        <th> Media Name </th>
                    </tr>
                </thead>
                <tbody data-bind="foreach: MediaGroups">
                    <tr>
                        <td data-bind="text: ID"></td>
                        <td data-bind="text: ID"></td>
                        <td data-bind="text:ID"></td>
                        <td data-bind="text: ID"></td>
                        <td data-bind="text: ID"></td>
                    </tr>
                </tbody>
            </table>

Link to Larger image

Answer 1

Check if this solves your problem: http://jsfiddle.net/javitube/DLjLn/1/

    .tblSearchMedia1
    {
        width:500px;
    }
    .tblSearchMedia1 tbody {
        height: 50px;
        overflow:auto;
        display:block;
        width:100%;
    }

    .tblSearchMedia1 thead th, .tblSearchMedia1 tbody td
    {
        width: 100px;
    }
    .tblSearchMedia1 td {
        padding: 3px 10px;
    }
    .tblSearchMedia1 thead > tr {
        position:relative;
        display:block;
    }