Hi sangyongjin88,
I have created the sample which full fill your requirement and the required js, css need to be downloaded from below link.
https://github.com/twlikol/GridViewScroll
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
Controller
public class HomeController : Controller
{
// GET: Home
public ActionResult Index()
{
NorthwindEntities entities = new NorthwindEntities();
return View(entities.Customers.ToList());
}
}
View
@model IEnumerable<Fixed_Header_Table_MVC.Customer>
@{
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" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" href="~/GridviewScroll/gridviewScroll.css" />
<script type="text/javascript" src="~/GridviewScroll/gridviewScroll.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
ApplyFreezePlugin();
});
function ApplyFreezePlugin() {
$('#tblCustomers').gridviewScroll({
width: 800,
height: 300,
freezesize: 0,
headerrowcount: 1,
arrowsize: 30,
varrowtopimg: "/Images/arrowvt.png",
varrowbottomimg: "/Images/arrowvb.png",
harrowleftimg: "/Images/arrowhl.png",
harrowrightimg: "/Images/arrowhr.png"
});
}
</script>
</head>
<body>
<table id="tblCustomers" class="table table-fixed" style="font-size:13px">
<tbody>
<tr>
<th>Id</th>
<th>Name</th>
<th>City</th>
<th>Country</th>
<th>Address</th>
</tr>
@for (int i = 0; i < Model.ToList().Count; i++)
{
<tr>
<td>
@Html.HiddenFor(modelItem => Model.ToList()[i].CustomerID)
@Html.CheckBox(Model.ToList()[i].CustomerID)
</td>
<td>
@Html.DisplayFor(modelItem => Model.ToList()[i].ContactName)
</td>
<td>
@Html.DisplayFor(modelItem => Model.ToList()[i].City)
</td>
<td>
@Html.DisplayFor(modelItem => Model.ToList()[i].Country)
</td>
<td>
@Html.DisplayFor(modelItem => Model.ToList()[i].Address)
</td>
</tr>
}
</tbody>
</table>
</body>
</html>
Screenshot
