Looking for fixed headers on a window adjustable table

Question

I have tried looking all over the place and couldn't find a good solution to my problem. I am looking to create a table with fixed headers that stay while scrolling the rest of the table. The problem is I also want it to be able to be aligned when the page window adjusts. I have been able to get fixed headers and have been able to get columns to align when I adjust the window, just haven't be able to get both to work together. Is there a script out there that can do this? I have tried fixedheadertable jquery, flexigrid, fixed-header-coffee, chromatable and floatyhead. None of these were able to give me the solution I am looking for. Maybe I am doing something wrong but I have a traditional table using theader, tbody, etc. I would like to avoid splitting up the table into two tables, because it seems they never line up properly but if that's the only solution, I'll take it.

Please help!

Answer 1

You can use just standard HTML/CSS. Specifically, utilize display/overflow/height in your CSS and thead/tbody in your HTML. Example CSS:

.scrollableTable tbody {
    display: block;
    overflow-y: auto;
    width: 100%;
    height: 50px;
}
.scrollableTable tr {
    display: block;
}
.scrollableTable td, .scrollableTable th {
    width: 50%;
}

Example HTML:

<table class="scrollableTable">
    <thead>
        <tr>
            <th>Fruit</th>
            <th>Color</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Apples</td>
            <td>Red</td>
        </tr>
        <tr>
            <td>Bananas</td>
            <td>Yellow</td>
        </tr>
        <tr>
            <td>Oranges</td>
            <td>Orange</td>
        </tr>
    </tbody>
</table>