Is There A Css3 Way To Fix A On The Y-axis, Let It Scroll On The X-axis?

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 that are vert

Solution 1:

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

functionposition_col_heads ( ) {
  // get all the TD child elements from the first rowvar 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.

Solution 2:

a dirty way would be to put the header table in a separate div like:

<divclass="header"><table><thead><tr><td>#</td><td>v</td></tr></thead></table></div>

Then body in the another div like:

<divclass="body"><table><tbody><tr><td>1</td><td>a</td></tr><tr><td>1</td><td>a</td></tr><tr><td>1</td><td>a</td></tr><tr><td>1</td><td>a</td></tr><tr><td>1</td><td>a</td></tr></tbody></table></div>

Now you can give a fixed height to body div and set oveflow to auto. like:

table{border:0px solid #ccc;height:30px;}
tabletrtd{border:1px solid #ccc;padding:5px;}
div.body{height:70px;overflow:auto;border-bottom:1px solid #ccc;}

here is a working example I did in jsfiddle