Question

我是Techno asp.net（C＃）上的新手，我尝试创建一个在垂直滚动时具有列修复功能的表或网格视图，但是我遇到的问题是当我想水平滚动两个时第一列必须固定。我尝试使用下面的代码，当我们有太多行时，我尝试使用滚动条来帮助用户查看数据。

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>Scrollable HTML table with CSS Style</title>

<style type="text/css">

section {

position: relative;

border: 1px solid #000;

padding-top: 37px;

background: #B34C00;

width:40%;

}

.container {

overflow-y: auto;

height: 200px;

}

table {

border-spacing: 0;

width:100%;

}

td + td {

border-left:1px solid #000;

}

td, th {

border-bottom:1px solid #000;

background: #fff;

color: #000;

padding: 10px 25px;

}

th {

height: 0;

line-height: 0;

padding-top: 0;

padding-bottom: 0;

color: transparent;

border: none;

white-space: nowrap;

}

th div{

position: absolute;

background: transparent;

color: #fff;

padding: 9px 25px;

top: 0;

margin-left: -25px;

line-height: normal;

border-left: 1px solid #800;

}

</style>

</head>

<body>

<form id="form1">

<section class="">

<div class="container">

<table>

<thead>

<tr class="header">

<th>User Name<div>User Name</div></th>

<th>Education<div>Education</div></th>

<th>Location1<div>Location1</div></th>
<th>Location2<div>Location2</div></th>
<th>Location3<div>Location3</div></th>
<th>Location4<div>Location4</div></th>
<th>Location5<div>Location5</div></th>
</tr>

</thead>

<tbody>

<tr>

<td>Suresh Dasari</td><td>B.Tech</td><td>Chennai</td><td>Chennai</td><td>Chennai</td><td>Chennai</td><td>Chennai</td>

</tr>

<tr>

<td>Rohini Dasari</td><td>Msc</td><td>Chennai</td><td>Chennai</td><td>Chennai</td><td>Chennai</td><td>Chennai</td>

</tr>

<tr>

<td>Madhav Sai</td><td>MBA</td><td>Nagpur</td><td>Chennai</td><td>Chennai</td><td>Chennai</td><td>Chennai</td>

</tr>

<tr>

<td>Praveen Kumar</td><td>B.Tech</td><td>Guntur</td><td>Chennai</td><td>Chennai</td><td>Chennai</td><td>Chennai</td>

</tr>

<tr>

<td>Mahendra Dasari</td><td>CA</td><td>Chennai</td><td>Chennai</td><td>Chennai</td><td>Chennai</td><td>Chennai</td>

</tr>

<tr>

<td>Nagaraju Dasari</td><td>MCA</td><td>USA</td><td>Chennai</td><td>Chennai</td><td>Chennai</td><td>Chennai</td>

</tr>

<tr>

<td>Sateesh Alavala</td><td>MD</td><td>Vizag</td><td>Chennai</td><td>Chennai</td><td>Chennai</td><td>Chennai</td>

</tr>

<tr>

<td>Sudheer</td><td>B.Tech</td><td>Kakinada</td><td>Chennai</td><td>Chennai</td><td>Chennai</td><td>Chennai</td>

</tr>

</tbody>

</table>

</div>

</section>

</form>

</body>

</html>

Answer 1

我正在使用“固定”列引导数据表。该链接是

https://datatables.net/examples/styling/bootstrap

在csHtml文件中添加了CSS文件

@Styles.Render("~/Content/fixedColumns.dataTables.min")
<style>
  div.DTFC_LeftBodyLiner {
    overflow-x: hidden;
  }

  div.DTFC_RightBodyLiner {
    overflow-x: hidden;
  }
</style>

然后在您的csHtml文件中添加了Js文件：

  <script src="~/Scripts/dataTables.fixedColumns.min.js"></script>

在您的Js DataTable中使用此代码

 $('#DataGrid').dataTable({
  fixedColumns: {
            leftColumns: 3,
            rightColumns: 1

    },
 });

在水平和垂直滚动时固定列

1 个答案: