ansaurus

Question

how do I create an HTML table with fixed/frozen left column and scrollable body?

Answer 1

+1 A:

Style the left column with position: fixed. (You'll presumably want to use top and left styles to control where exactly it occurs.)

chaos 2009-08-21 14:20:38

That's brilliant in its simplicity. Is it possible to allow proper vertical scrolling of entire page?

agsamek 2009-08-21 14:35:17

Yeah; you should skip the whole "table" part and just use two divs, one for the left column and one for the rest of the content. Left column div gets `position: fixed` and stays put, rest of content acts normally (presumably with a left margin set so it doesn't overlap the left column).

chaos 2009-08-21 14:46:40

Answer 2

A:

Alternatively, style the tbody with a predetermined size (via height:20em, for example) and use overflow-y:scroll;

Then, you can have a huge tbody, which will scroll independently of the rest of the page.

Eamon Nerbonne 2009-08-21 14:33:29

Typo on `scroll`

Randell 2009-08-21 14:34:29

fixed, thanks...

Eamon Nerbonne 2009-08-25 14:34:59

Answer 3

A:

may I ask why you specifically want a table to do this? it may be a lot easier using regular div's

Litso 2009-08-21 14:36:16

div solution may be OK as well

agsamek 2009-08-21 14:38:44

Answer 4

+3 A:

If you want a table where only the columns scroll horizontally, you can position:absolute the first column, and then wrap the entire table in an overflow-x: scroll block. Don't bother trying this in IE7, however...

<!DOCTYPE html>
<html>
<head><title>testdoc</title>
<style type="text/css">
    body { font:20pt Calibri;}
  table { border-collapse:collapse; border-top: 3px solid grey; margin-top:3px;}
  td {margin:0;
   border:3px solid grey; 
   border-top-width:0px; 
   white-space:nowrap;}
  div { width: 600px; 
  overflow-x:scroll;  
   margin-left:5em; 
   overflow-y:visible;
    padding-bottom:1px;}

  .headcol {position:absolute; 
  width:5em; 
  left:0; top:auto;
  border-right: 0px none black; 
  border-top: 3px solid grey; 
  margin-top:-3px; padding-right:4px;}
  .headcol:before {content: 'Row ';}
  .long { min-width:100em; background:yellow; text-align:center;}
</style>
</head>
<body>
<div><table>
<tr><td class="headcol">1</td><td class="long">...text...</td></tr>
<tr><td class="headcol">2</td><td class="long">...text...</td></tr>
<tr><td class="headcol">3</td><td class="long">...text...</td></tr>
<tr><td class="headcol">4</td><td class="long">...text...</td></tr>
<tr><td class="headcol">5</td><td class="long">...text...</td></tr>
<tr><td class="headcol">6</td><td class="long">...text...</td></tr>
<tr><td class="headcol">7</td><td class="long">...text...</td></tr>
<tr><td class="headcol">8</td><td class="long">...text...</td></tr>
<tr><td class="headcol">9</td><td class="long">...text...</td></tr>
</table></div>
</body>
</html>

Eamon Nerbonne 2009-08-21 15:31:55

This is incredible! Works fine in IE8

agsamek 2009-08-21 15:51:51

Note that getting the borders right (i.e., pixel perfectly aligned) is very tricky; in practice if you really want borders, I'd place them below the td level (by including all content of the td inside a div, for instance).

Eamon Nerbonne 2009-08-21 16:04:24

ansaurus

tags:

views:

answers:

how do I create an HTML table with fixed/frozen left column and scrollable body?

related questions