HTML Scrollable table vertically and horizontally

I thought i had originally achieved this, but the method i used wasnt correct. I separated the table head and the table data into two separate tables, each closed within a div. I then put the overflow on the outside div of each table-segment. However, this doesnt work because when i have a large number of columns, it begins to squeeze the columns together, whereas i still want them a fix width. Can anyone help? Ive omitted the event listeners in the code below.

<div id='HeaderTable' style='overflow:auto;overflow-x:hidden;overflow-y:scroll;width:900px;'>
    <table border='1' style='width:1900px;float:left;'>
        <thead style='text-align:left;'>
            <tr style='display:block;'>
                <th width='100' 开发者_运维百科style='width:100px;'>test1</th>
                <th width='100' style='width:100px;'>test2</th>
                <th width='100' style='width:100px;'>test3</th>
                <th width='100' style='width:100px;'>test4</th>
                <th width='100' style='width:100px;'>test5</th>
                <th width='100' style='width:100px;'>test6</th>
                <th width='100' style='width:100px;'>test7</th>
                <th width='100' style='width:100px;'>test8</th>
                <th width='100' style='width:100px;'>test9</th>
            </tr>
        </thead>
    </table>
</div>

<div id='DataTable' style='height:300px;float:left;overflow:auto;overflow-x:auto;overflow-y:scroll;width:900px;>
    <table border='1' style='width:1900px;float:left;'>
        <tbody id='ClearDetails'>
            <tr id='Row0'    style='color:black;height:auto;display:block;'>
                <td style='width:100px;'>1</td>
                <td id='Row0Col0' style='width:100px;'>1625</td>
                <td id='Row0Col0' style='width:100px;'>25</td>
                <td id='Row0Col0' style='width:100px;'>25</td>
                <td id='Row0Col0' style='width:100px;'>25</td>
                <td id='Row0Col0' style='width:100px;'>25</td>
                <td id='Row0Col0' style='width:100px;'>25</td>
                <td id='Row0Col0' style='width:100px;'>25</td>
                <td id='Row0Col0' style='width:100px;'>25</td>
                <td id='Row0Col0' style='width:100px;'>25</td>
            </tr>
        </tbody>
    </table>
</div>

First of all, you don't have to separate into two different divs: Check out the Pure CSS Table with Fixed Header.

Second, why is the table with in one location listed as 1900, and in another set to 900?

Third, have you turned off margins and padding to make sure the blocks are actually 100px?

Finally, in IE you have to account for the width of the scrollbar, so you will need to reduce the size of each column, or increase the width of the overall table to accommodate it.