jQuery GridView with Fixed Header and Scroll inside Bootstrap Tab

Hi,

Here I have created sample that will help you out.

HTML

<div>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript" src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.0.3/css/font-awesome.css" />
    <script src="Js/ScrollableGridPlugin.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#<%=GridView2.ClientID %>').Scrollable({
                ScrollHeight: 100,
                IsInUpdatePanel: true
            });
        });
    </script>
    <asp:ScriptManager ID="ScriptManager2" runat="server">
    </asp:ScriptManager>
    <div id="page-wrapper" style="background-color: white;">
        <div style="padding-top: 0px">
            <ul class="nav nav-tabs" style="height: 28px; margin-top: 0px;" role="tablist">
                <li style="float: right; padding-top: 0px; width: 35px;"><a href="#Table" role="tab"
                    data-toggle="tab" style="padding-left: 5px; padding-top: 0%; padding-bottom: 0%;"
                    aria-controls="Table"><span data-toggle="tooltip" data-placement="top" title="Table">
                        <i class="fa fa-table fa-fw"></i></span></a></li>
                <li class="active" style="float: right; padding-top: 0px; width: 35px;"><a href="#Chart"
                    data-toggle="tab" style="padding-left: 6px; padding-top: 0%; padding-bottom: 0%;"
                    aria-controls="Chart"><span data-toggle="tooltip" data-placement="top" title="Charts">
                        <i class="fa fa-bar-chart-o fa-fw"></i></span></a></li>
            </ul>
            <div class="tab-content">
                <div role="tabpanel" class="tab-pane active" id="Table" style="width: 300px;">
                    <asp:UpdatePanel ID="UpdatePanel2" runat="server">
                        <ContentTemplate>
                            <asp:GridView ID="GridView2" runat="server" AutoGenerateColumns="true">
                            </asp:GridView>
                        </ContentTemplate>
                    </asp:UpdatePanel>
                </div>
                <div role="tabpanel" class="tab-pane" id="Chart">
                    This is Chart Tab
                </div>
            </div>
        </div>
    </div>
</div>

C#

protected void Page_Load(object sender, EventArgs e)
{
    if (!this.IsPostBack)
    {
        DataTable dt = new DataTable();
        dt.Columns.AddRange(new DataColumn[3] { new DataColumn("Id", typeof(int)),
                        new DataColumn("Name", typeof(string)),
                        new DataColumn("Country",typeof(string)) });
        dt.Rows.Add(1, "John Hammond", "United States");
        dt.Rows.Add(2, "Mudassar Khan", "India");
        dt.Rows.Add(3, "Suzanne Mathews", "France");
        dt.Rows.Add(4, "Robert Schidner", "Russia");
        GridView2.DataSource = dt;
        GridView2.DataBind();
    }
}