You can put vertical scrollbar and keep header fixed using jQuery Scrollable Plugin but not horizontal
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Untitled Page</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type = "text/javascript" src = "scripts/ScrollableGridPlugin.js?22_12"></script>
<script type = "text/javascript">
$(document).ready(function () {
$('#Table1').Scrollable({
ScrollHeight: 50
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:Panel ID = "Panel1" runat = "server">
</asp:Panel>
</form>
</body>
</html>
protected void Page_Load(object sender, EventArgs e)
{
Table table = new Table();
table.ID = "Table1";
table.BorderStyle = BorderStyle.Solid;
//Add Header Row
TableRow row = new TableRow();
TableHeaderCell headerCell = new TableHeaderCell();
headerCell.Text = "Item";
row.BackColor = Color.Green;
row.Controls.Add(headerCell);
headerCell = new TableHeaderCell();
headerCell.Text = "Price";
row.Controls.Add(headerCell);
table.Controls.Add(row);
//Add DataRow
row = new TableRow();
TableCell cell = new TableCell();
cell.Text = "Shirt";
row.Controls.Add(cell);
cell = new TableCell();
cell.Text = "200";
row.Controls.Add(cell);
row.BackColor = Color.Yellow;
table.Controls.Add(row);
//Add Colspan Row
row = new TableRow();
row.BorderStyle = BorderStyle.Solid;
cell = new TableCell();
cell.Text = "Colspan Row";
cell.ColumnSpan = 2;
row.Controls.Add(cell);
row.BackColor = Color.Brown;
table.Controls.Add(row);
//Add DataRow
row = new TableRow();
cell = new TableCell();
cell.Text = "Tie";
row.Controls.Add(cell);
cell = new TableCell();
cell.Text = "30";
row.Controls.Add(cell);
table.Controls.Add(row);
row.BackColor = Color.Beige;
Panel1.Controls.Add(table);
}
Demo
| Item | Price |
|---|
| Shirt |
200 |
| Colspan Row |
| Tie |
30 |
