2

A friend of mine asked me a question that I couldn't answer or figure out yet.

The problem is: he wants to make an HTML table having width of 100% and many columns, of which the first one (or two) should be always visible, while others should scroll if their total width is higher than [width of the table (100%) minus width of the first two columns]. As he said, in effect this should be similar to Frozen columns in MS Excel.

I tried to group those columns into colgroups and style the second colgroup with overflow: auto, but that doesn't work. Instead, the table just grows horizontally, making the whole page scroll.

A partial solution that he himself came up with was to actually have three tables: one as a container, one for the two static columns and one for scrolling columns, and put the latter into a div. However, this solution again has a problem: in order for it to work, the div needs an absolute width value (specifying width: 100% just makes the table grow).

Is there any way to solve this problem?

Edit: Thanks for both replies, I've passed the links over to my friend, hope he finds a solution that suits him best.

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
Rimas Kudelis
  • 555
  • 3
  • 12
  • 1
    See: http://stackoverflow.com/questions/296020/how-can-i-lock-the-first-row-and-first-column-of-a-table-when-scrolling-possibly, http://stackoverflow.com/questions/1312236/how-do-i-create-an-html-table-with-fixed-frozen-left-column-and-scrollable-body, http://stackoverflow.com/questions/1100835/scrollable-html-table-with-top-row-and-left-column-frozen, and many others – Yi Jiang Sep 04 '10 at 11:36

0 Answers0