Is there a css3 way to fix a on the y-axis, let it scroll on the x-axis?

Question

This has been asked a zillion times: here, there, and the other place just on SO. Yet there\'s no real good answer that I can find.

Often I have tables

Answer 1

I ended up modeling the "solution" on the suggestion of @Naveed Ahmad. I put the data part of the table in a ; and made a fake that I filled in at onLoad time by referring to the widths and offsets of the s in the first table row, like this:

function position_col_heads ( ) {
  // get all the TD child elements from the first row
  var tds = main_tbody.children[0].getElementsByTagName('TD'); 
  for ( var i = 0; i < tds.length; ++i ) {
    thead.children[i].style.left =
      parseFloat( tds[i].offsetLeft ) + 'px';
    thead.children[i].style.width = 
      parseFloat( tds[i].scrollWidth ) + 'px';
  }
}

This works more or less OK on this page.