////////////////////// HTML
////////////// JQuery
///////////////////////// CS
//////////////////////// Result
<style type="text/css">
.table-scroll
{
position: relative;
max-width: 1280px;
width: 100%;
margin: auto;
display: table;
}
.table-wrap
{
width: 100%;
display: block;
height: 300px;
overflow: auto;
position: relative;
z-index: 1;
}
.table-scroll table
{
width: 100%;
margin: auto;
border-collapse: separate;
border-spacing: 0;
}
.table-scroll th,
.table-scroll td
{
padding: 5px 10px;
border: 1px solid #000;
background: #fff;
vertical-align: top;
}
.table-faux table
{
position: absolute;
top: 0;
left: 0;
width: 100%;
pointer-events: none;
}
.table-faux table
+ table
{
top: auto;
bottom: 0;
}
.table-faux table
tbody, .table-faux
tfoot
{
visibility:
hidden;
border-color: transparent;
}
.table-faux table
+ table thead
{
visibility: hidden;
border-color: transparent;
}
.table-faux table
+ table tfoot
{
visibility: visible;
border-color: #000;
}
.table-faux thead
th, .table-faux
tfoot th, .table-faux tfoot
td
{
background: #ccc;
}
.table-faux
{
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
overflow-y: auto;
}
.table-faux thead,
.table-faux tfoot,
.table-faux thead
th, .table-faux
tfoot th, .table-faux tfoot
td
{
position: relative;
z-index: 2;
}
</style>
<div class="table-scroll dist-scroll">
<div class="table-faux dist-faux" aria="hidden">
</div>
<div class="table-wrap dist-wrap">
<asp:GridView runat="server" ID="GV_District" AutoGenerateColumns="false" DataKeyNames="DistrictCode,StateCode" CssClass="table table-striped
table-bordered table-hover table-responsive main-table dist-table" Style="width: 100%;">
<Columns>
<asp:TemplateField HeaderText="SNo.">
<ItemTemplate>
<%#Container.DataItemIndex+1 %>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="District">
<ItemTemplate>
<asp:LinkButton runat="server" ID="Lbtn_District_Click" Text='<%#Eval("DistrictName") %>'
OnClick="Lbtn_District_Click"></asp:LinkButton>
</ItemTemplate>
<ItemStyle CssClass="text-left" />
</asp:TemplateField>
<asp:BoundField HeaderText="Latitude" DataField="Lat" />
<asp:BoundField HeaderText="Longitude" DataField="Long" />
<asp:TemplateField HeaderText="Action">
<ItemTemplate>
<asp:LinkButton runat="server" ID="Lbtn_DistrictEdit" OnClick="Lbtn_DistrictEdit_Click">
<i class=" fa fa-edit
f-16"></i> </asp:LinkButton>
</ItemTemplate>
</asp:TemplateField>
</Columns>
<RowStyle CssClass="text-center" />
</asp:GridView>
</div>
</div>
////////////// JQuery
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
FixedGridHeaderes();
});
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(FixedGridHeaderes);
function FixedGridHeaderes() {
getHeader("dist-table", "dist-faux",
"dist-wrap", "500");
getHeader("bl-table", "bl-table",
"bl-wrap", "500");
getHeader("ba-table", "ba-table",
"ba-wrap", "500");
getHeader("sba-table", "sba-table",
"sba-wrap", "500");
}
function getHeader(tblcss, clcss,
scllCss, scllHeight) {
$('.' + scllCss).height(scllHeight);
$("." + tblcss).clone(true).appendTo('.'
+ clcss).addClass('clone');
$("." + tblcss + ".clone").clone(true).appendTo('.'
+ clcss).addClass('clone2');
}
</script>
///////////////////////// CS
public static bool Grid_Add_Headers(GridView
GV)
{
bool gethead = true;
try
{
//This replaces <td> with <th>
GV.UseAccessibleHeader = true;
//This will add the <thead> and <tbody>
elements
GV.HeaderRow.TableSection = TableRowSection.TableHeader;
//This adds the <tfoot> element. Remove if you don't
have a footer row
GV.FooterRow.TableSection = TableRowSection.TableFooter;
}
catch (Exception
ex)
{
}
return gethead;
}