固定列表之类的结构

Question

I want to create a table like structure without using table,tr,td etc tags. The table should have its first column and headers fixed. I have fiddled it under this URL: http://jsfiddle.net/RtfZu/ .

I am not able to create a vertical scroll-bar, which upon scrolling should scroll the frozen column too.

Any insights?

Answer 1

You need to make your .table-body-scroll div scrollable. In the fiddle it breaks due to the a width issue causing a double scroll bar, but you should be able to fix that by adjusting the width and setting the overflow-x to hidden

.table-body-scroll
{    
    overflow-y:scroll;
}

http://jsfiddle.net/RtfZu/3/

Answer 2

Try adding overflow-y: auto; and define a height to your .table element. This should scroll the entire table

Answer 3

By the way, i have created a jQuery plugin that would render table using tags. The table is configurable too. code4devs.com is the URL