MVC - How to freeze columns in table

Watch this example on YouTube



1. MODEL

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace MVCTblScroll.Models
{
    public class CustomTable
    {
        public IEnumerable<GetTableTest_Result> tblList { get; set; }
    }
}

2. CONTROLLER

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using MVCTblScroll.Models;

namespace MVCTblScroll.Controllers
{
    public class HomeController : Controller
    {
        CompanyEntities db = new CompanyEntities();
        public ActionResult Index()
        {
            CustomTable model = new CustomTable();
            model.tblList = db.GetTableTest().ToList();
            return View(model);
        }

        public ActionResult About()
        {
            ViewBag.Message = "Your application description page.";

            return View();
        }

        public ActionResult Contact()
        {
            ViewBag.Message = "Your contact page.";

            return View();
        }
    }
}


3. VIEW

@model MVCTblScroll.Models.CustomTable

@using (Html.BeginForm(null, null, FormMethod.Post))
{
    if(Model.tblList != null)
    {
        <div id="table-container">
            <div class="table-section">
                <table>
                    <tr>
                        <th>
                            @Html.DisplayFor(model=>model.tblList.First().col1)
                        </th>
                        <th>
                            @Html.DisplayFor(model => model.tblList.First().col2)
                        </th>
                    </tr>
                    @foreach (var item in Model.tblList.ToList())
                    {
                        <tr>
                            <td>
                                <div class="one-line">@Html.DisplayFor(modelItem => item.col1)</div>
                            </td>
                            <td>
                                <div class="one-line">@Html.DisplayFor(modelItem => item.col2)</div>
                            </td>
                        </tr>
                    }
                </table>
            </div>
            <div class="table-section">
                <div class="outer">
                    <div class="inner">
                        <table>
                            <tr>
                                <th>
                                    @Html.DisplayNameFor(model=>model.tblList.First().col3)
                                </th>
                                <th>
                                    @Html.DisplayNameFor(model => model.tblList.First().col4)
                                </th>
                                <th>
                                    @Html.DisplayNameFor(model => model.tblList.First().col5)
                                </th>
                                <th>
                                    @Html.DisplayNameFor(model => model.tblList.First().col6)
                                </th>
                                <th>
                                    @Html.DisplayNameFor(model => model.tblList.First().col7)
                                </th>
                            </tr>
                            @foreach(var item in Model.tblList.ToList())
                            {
                                <tr>
                                    <td>
                                        @Html.DisplayFor(modelItem=>item.col3)
                                    </td>
                                    <td>
                                        @Html.DisplayFor(modelItem => item.col4)
                                    </td>
                                    <td>
                                        @Html.DisplayFor(modelItem => item.col5)
                                    </td>
                                    <td>
                                        @Html.DisplayFor(modelItem => item.col6)
                                    </td>
                                    <td>
                                        @Html.DisplayFor(modelItem => item.col7)
                                    </td>
                                </tr>
                            }
                        </table>
                    </div>
                </div>
            </div>
        </div>
    }
}


4. CSS
.outer{
    position:center;
}
.inner{
    overflow-x: auto;
    overflow-y:visible;
    width:400px;
}
#table-container{
    text-align:center;
    float:left;
}
.table-section{
    display:table-cell;
}
.header-three-rows{
    white-space:nowrap;
}
.one-line{
    word-break:keep-all;
    white-space:nowrap;
}
td{
    width:25px;
}
th{
    width:25px;
}
5. STORED PROCEDURE

USE [Company]
GO
/****** Object:  StoredProcedure [dbo].[GetTableTest]    Script Date: 2017-02-23 9:00:07 PM ******/
SET ANSI_NULLS ON
GO
SET QUOTED_IDENTIFIER ON
GO
-- =============================================
-- Author:        <Author,,Name>
-- Create date: <Create Date,,>
-- Description:    <Description,,>
-- =============================================
ALTER PROCEDURE [dbo].[GetTableTest]
AS
BEGIN
    -- SET NOCOUNT ON added to prevent extra result sets from
    -- interfering with SELECT statements.
    SET NOCOUNT ON;

    Select * FROM TableTest
END