Fixed Header Gridview with scrollable body in asp.net

Question

I have a grid-view placed inside a div and scroll bar is there. I want to set the grid view header fixed and while scrolling only the content will be scrollable. How can do this.... Thanks in Advance....

Answer 1

in C# after gridview bind GVBrand.HeaderRow.TableSection = TableRowSection.TableHeader;

add follwoing css in gridview

    table {
        width: 100%;
    }

    thead, tbody, tr, td, th { display: block; }

    tr:after {
        content: ' ';
        display: block;
        visibility: hidden;
        clear: both;
    }

    thead th {
        height: 30px;

        /*text-align: left;*/
    }

    tbody {
        height: 120px;
        overflow-y: auto;
    }

    thead {
        /* fallback */
    }


    tbody td, thead th {
        width: 19.2%;
        float: left;
    }

http://jsfiddle.net/T9Bhm/7/

Answer 2

Try doing the following.

Hide the header Configure the div, so you have the side bar Add on top of the div another div, with the column names

Don't forget to fix the column sizes and have them the same as the column names on top.

Answer 3

You can try IdeaSparks ASP.NET CoolControls