I have a table but when I scroll down the page my header in the table was a move to the top and disappeared how can I make a fixed header in my tableI want this header fixed even though when I scroll down using mouse I want to make lttablegtltthreadgtlttrgt ltthgt that header must be fixedPlease help meltdiv class34container34 dataaos34fadeup34gt ltdiv class34sectiontitle34gt using HtmlBeginForm HtmlAnti

Freeze HTML Table header using JavaScript in ASP.Net MVC

sangyong...

SOLVED CLOSED ACTIVE ANSWERED
User: sangyongjin88
Posted: on Apr 15, 2021 11:05 PM
Forum: ASP.Net MVC
Answer: 1
Views: 4122
Sample Code: Download

I have a table but when I scroll down the page, my header in the table was a move to the top and disappeared, how can I make a fixed header in my table?

I want this header fixed even though when I scroll down using mouse. I want to make <table><thread><tr> <th> that header must be fixed.

Please help me.

<div class="container" data-aos="fade-up">
    <div class="section-title">
        @using (Html.BeginForm())
        {
            @Html.AntiForgeryToken()
        <div class="form-horizontal">
        <hr />
        @Html.ValidationSummary(true, "", new { @class = "text-danger" })
        <br />
        <table id="submissionTable" class="table table-striped table-hover table-bordered" style="font-size: 10px;">
            <thead>
                <tr class="info" style="height:50px; width:100px; font-size:14px;">
                    <th>Item Name</th>
                    <th style="width:5%; text-align:center">
                        Scis Sold
                    </th>
                    <th>Square Sold</th>
                    <th>Return</th>
                    <th>PO</th>
                    <th>Inventory In</th>
                    <th>Inventory Out</th>
                    <th>Actual Qty</th>
                </tr>
            </thead>
            <tbody>
                <tr id="tablerow0">
                    <td>
                        <select id="Gif0" name="store_Invs[0].Item_name" style="width: 250px;height: 30px;">
                            @foreach (var item in ViewBag.PolicyOrgs)
                            {
                                <option value="@item.Id">@item.Barcode|   @item.Item_name</option>
                            }
                        </select>
                    </td>
                    <td>@Html.TextBoxFor(modelItem => modelItem.store_Invs[0].Scis_sold, new { @style = "width: 40px; height: 35px", @class = "scisso" })</td>
                    <td>@Html.TextBoxFor(modelItem => modelItem.store_Invs[0].Square_sold, new { @style = "width: 40px; height: 35px" })</td>
                    <td>@Html.TextBoxFor(modelItem => modelItem.store_Invs[0].Return_so, new { @style = "width: 40px; height: 35px" })</td>
                    <td>@Html.TextBoxFor(modelItem => modelItem.store_Invs[0].Po_rec, new { @style = "width: 40px; height: 35px" })</td>
                    <td>@Html.TextBoxFor(modelItem => modelItem.store_Invs[0].Po, new { @style = "width: 40px; height: 35px" })</td>
                    <td>@Html.TextBoxFor(modelItem => modelItem.store_Invs[0].Adj, new { @style = "width: 40px; height: 35px" })</td>
                    <td>@Html.TextBoxFor(modelItem => modelItem.store_Invs[0].Actual_qty, new { @style = "height:30px;" })</td>
                    <td><button type="button" class="btn btn-primary" onclick="removeTr(0);">Delete</button></td>
                </tr>
            </tbody>
        </table>
        <br />
        <div class="form-group">
            <div>
                <input type="submit" value="Submit" class="get-started-btn" style="font-size:20px" />
            </div>
        </div>
    </div>
        }
    </div>
</div>

Download FREE API for Word, Excel and PDF in ASP.Net

dharmend...

0 2

Reply
ANSWER
User: dharmendr
Replied: on Apr 16, 2021 02:10 AM
Modified: on Jan 11, 2022 11:17 AM
Report

Hi sangyongjin88,

Check this example. Now please take its reference and correct your code.

Database

For this example I have used of Northwind database that you can download using the link given below.

Download Northwind Database

Namespaces

using System.Configuration;
using System.Data;
using System.Data.SqlClient;

Controller

public class HomeController : Controller
{
    // GET: Home
    public ActionResult Index()
    {
        return View(GetData());
    }

    private DataTable GetData()
    {
        string conString = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
        string query = "SELECT * FROM Customers";
        using (SqlConnection con = new SqlConnection(conString))
        {
            SqlCommand cmd = new SqlCommand(query);
            using (SqlDataAdapter sda = new SqlDataAdapter())
            {
                cmd.Connection = con;
                sda.SelectCommand = cmd;
                using (DataTable dt = new DataTable())
                {
                    sda.Fill(dt);
                    return dt;
                }
            }
        }
    }
}

View

@model DataTable
@using System.Data;
@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
    <script type="text/javascript">
        window.onload = function () {
            var GridId = "submissionTable";
            var ScrollHeight = 300;
            var grid = document.getElementById(GridId);
            var gridWidth = grid.offsetWidth;
            var gridHeight = grid.offsetHeight;
            var headerCellWidths = new Array();
            for (var i = 0; i < grid.getElementsByTagName("TH").length; i++) {
                headerCellWidths[i] = grid.getElementsByTagName("TH")[i].offsetWidth;
            }
            grid.parentNode.appendChild(document.createElement("div"));
            var parentDiv = grid.parentNode;

            var table = document.createElement("table");
            for (i = 0; i < grid.attributes.length; i++) {
                if (grid.attributes[i].specified && grid.attributes[i].name != "id") {
                    table.setAttribute(grid.attributes[i].name, grid.attributes[i].value);
                }
            }
            table.style.cssText = grid.style.cssText;
            table.style.width = gridWidth + "px";
            table.appendChild(document.createElement("tbody"));
            table.getElementsByTagName("tbody")[0].appendChild(grid.getElementsByTagName("TR")[0]);
            var cells = table.getElementsByTagName("TH");

            var gridRow = grid.getElementsByTagName("TR")[0];
            for (var i = 0; i < cells.length; i++) {
                var width;
                if (headerCellWidths[i] > gridRow.getElementsByTagName("TD")[i].offsetWidth) {
                    width = headerCellWidths[i];
                }
                else {
                    width = gridRow.getElementsByTagName("TD")[i].offsetWidth;
                }
                cells[i].style.width = parseInt(width - 3) + "px";
                gridRow.getElementsByTagName("TD")[i].style.width = parseInt(width - 3) + "px";
            }
            parentDiv.removeChild(grid);

            var dummyHeader = document.createElement("div");
            dummyHeader.appendChild(table);
            parentDiv.appendChild(dummyHeader);
            var scrollableDiv = document.createElement("div");
            if (parseInt(gridHeight) > ScrollHeight) {
                gridWidth = parseInt(gridWidth);
            }
            scrollableDiv.style.cssText = "overflow:auto;height:" + ScrollHeight + "px;width:" + gridWidth + "px";
            scrollableDiv.appendChild(grid);
            parentDiv.appendChild(scrollableDiv);
        }
    </script>
</head>
<body>
    <table id="submissionTable" class="table table-striped table-hover table-bordered" style="font-size: 10px;">
        <thead>
            <tr class="info" style="height:50px; width:100px; font-size:14px;">
                <th>CustomerID</th>
                <th style="width:5%; text-align:center">Name</th>
                <th>City</th>
                <th>Country</th>
                <th>Address</th>
                <th>Phone</th>
            </tr>
        </thead>
        <tbody>
            @foreach (DataRow dr in Model.Rows)
            {
                <tr>
                    <td>@Html.TextBoxFor(x => @dr["CustomerID"])</td>
                    <td>@Html.TextBoxFor(x => @dr["ContactName"])</td>
                    <td>@Html.TextBoxFor(x => @dr["City"])</td>
                    <td>@Html.TextBoxFor(x => @dr["Country"])</td>
                    <td>@Html.TextBoxFor(x => @dr["Address"])</td>
                    <td>@Html.TextBoxFor(x => @dr["Phone"])</td>
                </tr>
            }
        </tbody>
    </table>
</body>
</html>

Screenshot

I agree, here is the link: https://www.e-iceblue.com/Introduce/spire-office-for-net-free.html

Freeze HTML Table header using JavaScript in ASP.Net MVC

Company

Explore

Follow us

Contact Us