I need help creating a table with a fixed header and scrollable body. I tried using CSS and JavaScript, but since the table is generated dynamically from a database, I'm facing some challenges. Any assistance would be appreciated.
Below is the code snippet I'm working with:
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);
}
The div where I want to display the table:
<div class="mainEntry" style="width:90%" id="tablediv" runat="server" />
And here's the CSS styling for the 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;
}