HTML fixed header in table dynamically in ASP.NET

Question

I created a table dynamically, being populated from database. What want to do is to created a fixed header and a scrollable body. I tried css and javascript but didn't manage to do anything, I think because table is created automatically. Help.

Here is my code:

    private void GenerateTable();
    {
        DataTable dt = CreateDataTable();//in CreateDataTable I just take all my reocrds from database
        Table table = new Table();
        TableRow row = null;

        row = new TableRow();

        for (int j = 0; j < dt.Columns.Count; j++)
        {
            TableHeaderCell headerCell = new TableHeaderCell();
            headerCell.Text = dt.Columns[j].ColumnName;
            row.Cells.Add(headerCell);
        }
        table.Rows.Add(row);

        //Add the Column values
        for (int i = 0; i < dt.Rows.Count; i++)
        {
            row = new TableRow();
            for (int j = 0; j < dt.Columns.Count; j++)
            {
                    TableCell cell = new TableCell();
                    cell.Text = dt.Rows[i][j].ToString();
                    row.Cells.Add(cell);
            }
            table.Rows.Add(row);

        }
        tablediv.Controls.Add(table);
    }

Div where I add the table:

   <div class="mainEntry" style="width:90%" id="tablediv" runat="server" />

And my CSS for table:

table {
border-collapse: collapse;
width: 100%;
color: white;
}

th, td {
text-align: left;
padding: 8px;
}
 th{
font-size:20px;
}
tbody{
height:500px;
overflow:auto;
display:block;
}
tr:nth-child(even){background-color: rgba(255, 255, 255, .15)}

th {
background-color: rgba(174, 183, 212, .15);
color: white;
}

I've just answered a similar question yesterday, please have a look here - http://stackoverflow.com/questions/38659787/fix-header-row-in-repeater-in-asp-net/38666596#38666596 — Denys Wessels, Aug 01 '16 at 16:27
Problem is that i have no thead in my table, when i create jum dinamycally it put my in tbody... — Voila Daniel, Aug 01 '16 at 16:42

score 0 · Answer 1 · answered Aug 01 '16 at 16:31

0

I hope this css classes demo can help you. Visit fiddlehttp://jsfiddle.net/TweNm/

answered Aug 01 '16 at 16:31

shady youssery

430
2
17

Problem is that i have no thead in my table, when i create jum dinamycally it put my in tbody... – Voila Daniel Aug 01 '16 at 16:42
you can use tr:first-child to take the first tr – shady youssery Aug 01 '16 at 17:00

HTML fixed header in table dynamically in ASP.NET

1 Answers1