trying to expand width and make it match width without breaking jquery function

Question

I've been using this fiddle here but the only problem is some of my td cells are much bigger than this example and I can't get the header cells to align with the body cells without causing the scroll bars to disappear. This is what happens when a cell is too big.

<style type="text/css">
.fieldset-auto-width 
{
    display: inline-block;
}
html 
{
    font-family: verdana;
    font-size: 10pt;
    line-height: 25px;
}
table 
{
    border-collapse: collapse;
    width: 1000px;
    overflow-x: scroll;
    display: block;
}
thead 
{
    background-color: #EFEFEF;
}
thead, tbody 
{
    display: block;
}
tbody 
{
    overflow-y: scroll;
    overflow-x: hidden;
    height: 140px;
}
td, th 
{
    min-width: 150px;
    height: 25px;
    border: solid 1px black;
}
table.big td th
{
    width: 200px;
}
</style>

<table>
    <thead>
        <tr>
            <th>Column 1</th>
            <th>Column 2</th>
            <th>Column 3</th>
            <th>Column 4</th>
            <th>Column 5</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Row 1</td>
            <td>Rowaaahhhhhaaaa 1</td>
            <td>Row 1</td>
            <td>Row 1</td>
            <td>Row 1</td>
        </tr>
        <tr>
            <td>Row 2</td>
            <td>Row 2</td>
            <td>Row 2</td>
            <td>Row 2</td>
            <td>Row 2</td>
        </tr>
        <tr>
            <td>Row 3</td>
            <td>Row 3</td>
            <td>Row 3</td>
            <td>Row 3</td>
            <td>Row 3</td>
        </tr>
        <tr>
            <td>Row 4</td>
            <td>Row 4</td>
            <td>Row 4</td>
            <td>Row 4</td>
            <td>Row 4</td>
        </tr>
        <tr>
            <td>Row 5</td>
            <td>Row 5</td>
            <td>Row 5</td>
            <td>Row 5</td>
            <td>Row 5</td>
        </tr>
        <tr>
            <td>Row 6</td>
            <td>Row 6</td>
            <td>Row 6</td>
            <td>Row 6</td>
            <td>Row 6</td>
        </tr>
        <tr>
            <td>Row 7</td>
            <td>Row 7</td>
            <td>Row 7</td>
            <td>Row 7</td>
            <td>Row 7</td>
        </tr>
        <tr>
            <td>Row 8</td>
            <td>Row 8</td>
            <td>Row 8</td>
            <td>Row 8</td>
            <td>Row 8</td>
        </tr>
        <tr>
            <td>Row 9</td>
            <td>Row 9</td>
            <td>Row 9</td>
            <td>Row 9</td>
            <td>Row 9</td>
        </tr>
        <tr>
            <td>Row 10</td>
            <td>Row 10</td>
            <td>Row 10</td>
            <td>Row 10</td>
            <td>Row 10</td>
        </tr>
    </tbody>
</table>

$('table').on('scroll', function () {
    $("table > *").width($("table").width() + $("table").scrollLeft());
});

I noticed when I take out "display: block;" it causes the headers and body cells to match, but that breaks the scroll bars. I tried this display: grouping element but that also breaks the scrolls. I tried setting the width in the particularly large cells but it had no effect, I tried making a class and putting the class in the and cells but it also had no effect, it almost feels impossible to fix. Can someone please help me?