Question

Is there a way to position a column in a table so that it doesn’t scroll along the x axis, but scrolls along the y? Perhaps some way to use absolute positioning that only effects one (like a spreadsheet. The header stays at the top, like absolute positioning)?

Note: I want to avoid using Javascript

EDIT: I need to have the overflow for the table set to scroll

OK I found an example that works the way I want: http://cross-browser.com/x/examples/xtable.php,
or this one: http://www.disconova.com/open_source/files/freezepanes.htm but I can’t figure out what they do to make it work.

---

I ended up using Javascript anyway.

For fixed columns I found a great Javascript toolkit called DataTables and it has a plug-in called FixedColumns that allows fixed columns. Link.

Answer 1

If you want to do it with tables you would have to do something like this

<table>
    <tr><td>col1 name</td><td>col2 name</td></tr>
</table>
<div>
    <table>
        <tr><td>col1 row1 data</td><td>col2 row1 data</td></tr>
        <tr><td>col1 row2 data</td><td>col2 row2 data</td></tr>
        <tr><td>col1 row3 data</td><td>col2 row3 data</td></tr>
    </table>
</div>

Then you need to set styles appropriatley, make sure that the widths of each cell in the header is the same as the width you set for each column in the second table this will make your header and the data table lign up. Make the div scrollable so the data parts of the table will scroll while the header parts remain static.

You could do a similair thing for row headings too by placing a table to the left of the data table and making sure you offset the column header table appropriatley to the right.

I am not going to write out all the css though as I am sure you can figure this out.