ASP fixed Header

Question

I have a GridView in a div on my HTML-Code like this:

   <div class="container" style="width: 80%; height: 800px; overflow: scroll">
        <asp:GridView ID="GridView1" runat="server" AllowPaging="True" PageSize="40" AllowSorting="True"
            AutoGenerateSelectButton="True" EnableModelValidation="False" OnPageIndexChanging="GridView1_SelectedIndexChanged"
            AutoGenerateColumns="false" OnSorting="GridView1_Sorting" CssClass="mydatagrid"
            PagerStyle-CssClass="pager" HeaderStyle-CssClass="headerGrida1" RowStyle-CssClass="rows"
            ShowHeaderWhenEmpty="true" Font-Size="X-Small" ForeColor="Black">

The div makes it already scrollable but I also need a fixed Header of the Grid. What I tried with CSS doesnt work out...

I tried thi for the container:

.container
        {
            overflow: scroll;
        }
        .container table th
        {
            position: relative;
        }
        .container table tbody
        {
            overflow: hidden;
        }
    </style>

And this with the Gird:

.headerGrida1
{
    background-color: #4a708b;
    font-family: Calibri;
    color: White;
    border: none 0px transparent;
    height: 25px;
    text-align: center;
    font-size: 16px;
    position: relative;

}

But nothing seems to work...

https://stackoverflow.com/questions/19158559/how-to-fix-a-header-on-scroll — levent, May 26 '17 at 11:09

score 1 · Answer 1 · answered May 26 '17 at 11:27

1

Below is the good solution that will fixed header with vertical and horizontal scroll bars

http://www.dotnetbull.com/2011/11/scrollable-gridview-with-fixed-headers.html

answered May 26 '17 at 11:27

Aishwarya

433
3
10

score 0 · Answer 2 · answered May 26 '17 at 15:18

Isn't there a way to do t just with CSS?

That's what I get when switching Position=absolute or = fixed.

The only thing is that it has to be above the first row otherwise nobody would see the rwos anymore.

Maybe there is simple solution, too? Another Problem is that he width of the header is now different to the columns

ASP fixed Header

2 Answers2