<div>
<div id="divHeader" style="background-color:#ccc;" >
<table class='gridstyle'>
<tr style='height:43px; ' class='clsTableHeader' >
<td class="ClsProduct1" >Product
Name</td>
<td class="ClsProduct1" >Product
Code</td>
<td class="ClsProduct1" >Product
Type</td>
<td class="ClsProduct1" >Price</td>
<td class="ClsProduct2" >Number</td>
</tr>
</table>
</div>
<div id="divContent" runat="server" style="height:250px;overflow:auto;" >
<table class='gridstyleBody'>
<tr style='height:43px;background-color:#E4F5FC; ' class='clsTableHeader' >
<td class="ClsProduct1" style="font-weight:normal;text-align:left;" >Product
Name</td>
<td class="ClsProduct1" style="font-weight:normal;text-align:left;" >Product
Code</td>
<td class="ClsProduct1" style="font-weight:normal;text-align:left;" >Product
Type</td>
<td class="ClsProduct1" style="font-weight:normal;text-align:left;" >Price</td>
<td class="ClsProduct2" style="font-weight:normal;text-align:left;" >Number</td>
</tr>
<tr style='height:43px;background-color:#EFEFEF; ' class='clsTableHeader' >
<td class="ClsProduct1" style="font-weight:normal;text-align:left;" >Product
Name</td>
<td class="ClsProduct1" style="font-weight:normal;text-align:left;" >Product
Code</td>
<td class="ClsProduct1" style="font-weight:normal;text-align:left;" >Product
Type</td>
<td class="ClsProduct1" style="font-weight:normal;text-align:left;" >Price</td>
<td class="ClsProduct2" style="font-weight:normal;text-align:left;" >Number</td>
</tr>
<tr style='height:43px;background-color:#E4F5FC; ' class='clsTableHeader' >
<td class="ClsProduct1" style="font-weight:normal;text-align:left;" >Product
Name</td>
<td class="ClsProduct1" style="font-weight:normal;text-align:left;" >Product
Code</td>
<td class="ClsProduct1" style="font-weight:normal;text-align:left;" >Product
Type</td>
<td class="ClsProduct1" style="font-weight:normal;text-align:left;" >Price</td>
<td class="ClsProduct2" style="font-weight:normal;text-align:left;" >Number</td>
</tr>
<tr style='height:43px;background-color:#EFEFEF; ' class='clsTableHeader' >
<td class="ClsProduct1" style="font-weight:normal;text-align:left;" >Product
Name</td>
<td class="ClsProduct1" style="font-weight:normal;text-align:left;" >Product
Code</td>
<td class="ClsProduct1" style="font-weight:normal;text-align:left;" >Product
Type</td>
<td class="ClsProduct1" style="font-weight:normal;text-align:left;" >Price</td>
<td class="ClsProduct2" style="font-weight:normal;text-align:left;" >Number</td>
</tr>
<tr style='height:43px;background-color:#E4F5FC; ' class='clsTableHeader' >
<td class="ClsProduct1" style="font-weight:normal;text-align:left;" >Product
Name</td>
<td class="ClsProduct1" style="font-weight:normal;text-align:left;" >Product
Code</td>
<td class="ClsProduct1" style="font-weight:normal;text-align:left;" >Product
Type</td>
<td class="ClsProduct1" style="font-weight:normal;text-align:left;" >Price</td>
<td class="ClsProduct2" style="font-weight:normal;text-align:left;" >Number</td>
</tr>
<tr style='height:43px;background-color:#EFEFEF; ' class='clsTableHeader' >
<td class="ClsProduct1" style="font-weight:normal;text-align:left;" >Product
Name</td>
<td class="ClsProduct1" style="font-weight:normal;text-align:left;" >Product
Code</td>
<td class="ClsProduct1" style="font-weight:normal;text-align:left;" >Product
Type</td>
<td class="ClsProduct1" style="font-weight:normal;text-align:left;" >Price</td>
<td class="ClsProduct2" style="font-weight:normal;text-align:left;" >Number</td>
</tr>
<tr style='height:43px;background-color:#E4F5FC; ' class='clsTableHeader' >
<td class="ClsProduct1" style="font-weight:normal;text-align:left;" >Product
Name</td>
<td class="ClsProduct1" style="font-weight:normal;text-align:left;" >Product
Code</td>
<td class="ClsProduct1" style="font-weight:normal;text-align:left;" >Product
Type</td>
<td class="ClsProduct1" style="font-weight:normal;text-align:left;" >Price</td>
<td class="ClsProduct2" style="font-weight:normal;text-align:left;" >Number</td>
</tr>
<tr style='height:43px;background-color:#EFEFEF; ' class='clsTableHeader' >
<td class="ClsProduct1" style="font-weight:normal;text-align:left;" >Product
Name</td>
<td class="ClsProduct1" style="font-weight:normal;text-align:left;" >Product
Code</td>
<td class="ClsProduct1" style="font-weight:normal;text-align:left;" >Product
Type</td>
<td class="ClsProduct1" style="font-weight:normal;text-align:left;" >Price</td>
<td class="ClsProduct2" style="font-weight:normal;text-align:left;" >Number</td>
</tr>
</table>
</div>
</div>
Step 2
Copy and paste the style also.
<style type="text/css">
.gridstyle
{
border:none;
border-collapse:collapse;
border-right:none;
font-family: Tahoma, Arial, Verdana;
font-size: 11px;
text-align:left;
width: 100%;
min-width:400px;
}
.gridstyleBody
{
border:none;
border-collapse:collapse;
border-right:none;
font-family: Tahoma, Arial, Verdana;
font-size: 11px;
text-align:left;
width: 100%;
min-width:400px;
}
.ClsProduct1
{
border:1px solid #FFFFFF;
width: 20%;
font-weight:bold;
text-align:center;
}
.ClsProduct2
{
border:1px solid #FFFFFF;
font-weight:bold;
text-align:center;
}
</style>
Now everything is done. Copy and paste this code and see how it works. It makes the structure as you want. You can use this structure for making the header fixed. If you think you cannot bind dynamically data from the datatable or xml, you are wrong. It is very simple. It is simple than we are binding data to the grid control. For binding data to the grid view control we need to create the item templates etc. In our structure, it is not needed. It is very simple. I have given explanation and C# code on how to dynamically bind data from a datatable to our gridview structure. To know how it is possible, you can refer here.
Thanks for reading my post. Have a great day. Happy coding. :)