Как закреплять заголовок моей таблицы?

Я хотел бы, чтобы заголовок моей таблицы остался установленным, так как, когда под равным 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
задан 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
ответ дан 01.12.2019, 12:39