Как сохранить таблицу начальной загрузки в липке в Div с динамическими данными? ⇐ Html

[Anonymous]

Редактировать: Исправлена ​​фрагмент ниже, так что теперь он работает как ответ @Raghavendra, для всех, кто также обеспокоен липким головом , как я. Я решил использовать свой пользовательский CSS вместо расширения таблицы Bootstrap. Заголовки) И я попробовал липкий разгибатель Bootstrap-Table Come-Header , который работает, когда я прокручиваю весь документ, но когда я хочу, чтобы моя таблица находилась внутри контейнера для Div, он больше не работает.
my codepen < /strong> пример (неудачная попытка) < /p>
(я разместил данные для примеров, но на самом деле я использую Ajax, чтобы вызвать Все данные, затем инициализируйте таблицу после этого, поэтому я вообще ничего не пишу в таблице в HTML, и мне нужно, чтобы она оставалась таким образом)
Но после инициирования заголовок больше не придерживается. Желаемый результат: < /strong> заголовок остается в верхней части Div при прокрутке внутри < /p>

Код: Выделить всё

$(document).ready(function () {
var columns = [
{
field: "name",
title: "Name"
},
{
field: "age",
title: "Age"
},
{
field: "city",
title: "City"
}
];

var data = [
{ name: "John Doe", age: 28, city: "New York" },
{ name: "Jane Smith", age: 34, city: "Los Angeles" },
{ name: "Jane Smith2", age: 31, city: "Los Angeles" },
{ name: "Jane Smith3", age: 32, city: "Los Angeles" },
{ name: "Jane Smith4", age: 33, city: "Los Angeles" },
{ name: "Mike Johnson", age: 45, city: "Chicago" },
{ name: "Sarah Lee", age: 30, city: "Miami" }
];

// init table
$("#RealTable").bootstrapTable({
data: data,
columns: columns
});
});< /code>
.divA {
width: 100%;
max-height: 50vh; /* set height = 50vh */
overflow: auto; /* allow scrolling in divA */
padding: 20px;
padding-top: 0;
position: relative; /* need this for sticky to work */
}

.table-responsive {
overflow-x: initial !important;
}

.bootstrap-table .fixed-table-container .fixed-table-body {
overflow: initial !important;
}

.custom-sticky-header th {
position: sticky !important;
top: 0;
background-color: turquoise;
color: white;
z-index: 30 !important; /* make sure it's on the top of other things */
}

th,
td {
padding: 10px;
border: 1px solid #ddd;
text-align: center;
}< /code>





Sticky Header with Bootstrap Table










title
qweqwewq












title2
qweqwewq
qweqwewq
qweqwewq

Подробнее здесь: https://stackoverflow.com/questions/794 ... namic-data