исправлена ​​колонка при прокрутке по горизонтали и вертикали - PullRequest
Новая
       4

исправлена ​​колонка при прокрутке по горизонтали и вертикали

0 голосов
/ 23 октября 2018

Я новичок в техно 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>

1 Ответ

0 голосов
/ 23 октября 2018

Я использую Фиксированный столбец для моей начальной загрузки.Эта ссылка

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

Добавлен CSS-файл в вашем файле csHtml 

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

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

Затем добавлен Js-файл в вашем файле csHtml: 

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

Использование этого кода в вашей JS DataTable 

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

    },
 });
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...