HTML table horizontal sizing issue

Question

I'm sure this is an easy problem to solve, but I'm just not much of a html/css wizard yet!

I have a table that I generate and the spec calls for there being a fixed header while allowing the body to be scrollable.

The problem is, now the horizontal direction is scrollable also, which I don't want it to be. There is no reason it can't be fixed. It looks like the presence of the scroll bar for the vertical direction takes up space so that the browser now thinks that it needs a horizontal scroll to fit in the horizontal content. Frustrating!

Here is what I have so far:

<table cellspacing="0" cellpadding="4" border="1" bordercolor="cccccc">
        <thead style="position:relative;">
            <tr bgcolor="eeeeee">
                <td>Column 1 Header</td>
                <td>Column 2 Header</td>
            </tr>
        </thead>
        <tbody style="overflow-y:auto;overflow-x:hidden;height:480px;">
            <tr>
                <td>Some data</td>
                <td>Some more data</td>
            </tr>
            <tr>
                <td>Some data</td>
                <td>Some more data</td>
            </tr>
            <tr>
                <td>Some data</td>
                <td>Some more data</td>
            </tr>
            <tr>
                <td>Some data</td>
                <td>Some more data</td>
            </tr>
         </tbody>
      </table>

Answer 1

Tau, Check out www.datatables.net. It's a Jquery plugin that reformats your tables via JS and allows for sorting, paging, etc. The header "freeze" is exactly the functionality that would solve your problems, and the extra features are just bonus. I've stopped using the "freeze" method and switched nearly entirely to paged tables, which are just a single line of configuration to enable. Personally, I don't deploy tabular data without it anymore, and the extra 5 lines of code only takes me a minute or two to add. It's a win-win in my book, no crazy CSS or reformatting required.