CSS style to prevent scrolling along the y axis - css

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

I'm pretty sure you use
overflow-y: hidden;
For example, take a look at this website.
http://www.brunildo.org/test/Overflowxy2.html
In the following example we can create a table inside a table, not the cleanest idea but it should work.
<TABLE BORDER="2" CELLPADDING="5" CELLSPACING="5">
<TD>
<div style="width:325px; height:48px; overflow-y:scroll;">
<TABLE BORDER="0" CELLPADDING="3" CELLSPACING="3">
<TD>inside the first one<br />
we can add text and enable<br />
overflow-y for vertical<br />
scrolling.</TD>
</TABLE>
</div>
</TD>
<TD> This is a different table. You can edit this to fit your needs.</TD>
</TABLE>
Note: Head over to w3schools to try it on the fly, that way you can test it and learn from it ;) - http://www.w3schools.com/cssref/css3_pr_overflow-y.asp

Answer 2

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.

Answer 3

You can wrap the table in a container with a fixed width and set it's overflow property.
<div id="foo">
<table>
<tr>
<td>a</td><td>b</td><td>c</td><td>d</td>
</tr>
<tr>
<td>a</td><td>b</td><td>c</td><td>d</td>
</tr>
<tr>
<td>a</td><td>b</td><td>c</td><td>d</td>
</tr>
</table>
</div>
CSS
#foo {
width: 100px;
overflow: auto;
}
Your table will obviously need to have the data displayed width-wise. Adding more rows won't cause it to scroll unless you specify a height to the container as well.
DEMO