Как закреплять заголовок моей таблицы?
Я хотел бы, чтобы заголовок моей таблицы остался установленным, так как, когда под равным scroll двигается заголовок, я использую ASP.Net, HTML5, я хочу сделать это, потому что моя таблица приносит слишком много реестров, и поэтому поместили ему scroll, но в момент загружения равного заголовка исчезни я жду и было понятно, что я хочу сделать, (Я НЕ ИСПОЛЬЗУЮ DATATABLE), эх я одеваю примеры, которые это делают с CSS или языком сценариев JavaScript, но не каковым был лучший выбор из-за хороших практик. Привет
это моя таблица
<div class="container" style="max-height:250px; min-height:10px; overflow:auto;">
<table class="table table-striped table-bordered" id="tbRecetas">
<thead style="background-color: #1359A1; color: #ffffff">
<tr>
<th class="hidden">
RecetaId
</th>
<th>
Asignar
</th>
<th>
Folio Receta
</th>
<th class="text-center">
Estatus
</th>
<th>
Código EAN
</th>
<th>
Descripción de Medicamento
</th>
<th>
Unidades
</th>
<th>
Preautorización
</th>
<th>
Tanto Receta
</th>
<th>
Cantidad Toma
</th>
<th>
Periodicidad
</th>
<th>
Duración
</th>
<th class="hidden">
Elegibilidad
</th>
</tr>
</thead>
<tbody id="tbodyRecetas">
@if (ViewBag.Asignar.Count != 0)
{
foreach (var item in ViewBag.Asignar)
{
<tr>
<td class="hidden">@item.RecetaId</td>
<td class="text-center"><input type="checkbox" id="checkTable" /></td>
<td>@item.FolioReceta</td>
<td>@item.Estatus</td>
<td>@item.CodigoEAN</td>
<td>@item.DescripcionMedicamento</td>
<td class="text-center">@item.Unidades</td>
<td>@item.Preautorizacion</td>
<td class="text-center">@item.TantoReceta</td>
<td class="text-center">@item.CantidadToma</td>
<td class="text-center">@item.Periodicidad</td>
<td class="text-center">@item.DuracionTratamiento</td>
@*<td>@item.Derechohabiente</td>*@
<td class="hidden">@item.Elegibilidad</td>
@*<td class="text-center">@item.Contador</td>*@
</tr>
}
}
else
{
<template>
<p class="alert alert-info">No se encontraron registros</p>
</template>
}
</tbody>
</table>
0
задан David Copca
05.11.2019, 19:47
Ссылка
1 ответ
Этот пример, основанный на Bootstrap 3.4.1 podrГ, - чтобы быть полезен, ты будешь должен давать ему настройки относительно твоего CSS.
//@debounce(500)
window.scrolled = function(o)
{
//altura visible + pixel desplazado = altura total
if(o.offsetHeight + o.scrollTop == o.scrollHeight)
{
console.log("bottom hit");
// datos de carga y actualización observables
}
}.table-fixed thead {
width: 97%;
}
.table-fixed tbody {
height: 230px;
overflow-y: auto;
width: 100%;
}
.table-fixed thead,
.table-fixed tbody,
.table-fixed tr,
.table-fixed td,
.table-fixed th {
display: block;
}
.table-fixed tbody td,
.table-fixed thead > tr > th {
float: left;
border-bottom-width: 0;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="panel panel-default">
<div class="panel-heading">
<h4>
Fixed Header Scrolling Table
</h4>
</div>
<table class="table table-fixed">
<thead>
<tr>
<th class="col-md-2">#</th>
<th class="col-md-8">Name</th>
<th class="col-md-2">Points</th>
</tr>
</thead>
<tbody onscroll="scrolled(this)">
<tr>
<td class="col-md-2">1</td>
<td class="col-md-8">Mike Adams</td>
<td class="col-md-2">23</td>
</tr>
<tr>
<td class="col-md-2">2</td>
<td class="col-md-8">Holly Galivan</td>
<td class="col-md-2">44</td>
</tr>
<tr>
<td class="col-md-2">3</td>
<td class="col-md-8">Mary Shea</td>
<td class="col-md-2">86</td>
</tr>
<tr>
<td class="col-md-2">4</td>
<td class="col-md-8">Jim Adams</td>
<td class="col-md-2">23</td>
</tr>
<tr>
<td class="col-md-2">5</td>
<td class="col-md-8">Henry Galivan</td>
<td class="col-md-2">44</td>
</tr>
<tr>
<td class="col-md-2">6</td>
<td class="col-md-8">Bob Shea</td>
<td class="col-md-2">26</td>
</tr>
<tr>
<td class="col-md-2">7</td>
<td class="col-md-8">Andy Parks</td>
<td class="col-md-2">56</td>
</tr>
<tr>
<td class="col-md-2">8</td>
<td class="col-md-8">Bob Skelly</td>
<td class="col-md-2">96</td>
</tr>
<tr>
<td class="col-md-2">9</td>
<td class="col-md-8">William Defoe</td>
<td class="col-md-2">13</td>
</tr>
<tr>
<td class="col-md-2">10</td>
<td class="col-md-8">Will Tripp</td>
<td class="col-md-2">16</td>
</tr>
<tr>
<td class="col-md-2">11</td>
<td class="col-md-8">Bill Champion</td>
<td class="col-md-2">44</td>
</tr>
<tr>
<td class="col-md-2">12</td>
<td class="col-md-8">Lastly Jane</td>
<td class="col-md-2">6</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>CГіdigo, основанные в: https://www.bootply.com/6s8NGoSS6M , где используют ее versiГіn 2.
0
ответ дан fredyfx
01.12.2019, 12:39
Ссылка