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

[Anonymous]

Я использую Bootstrap-table и динамически добавление моих наборов в таблицу (включая заголовки)
Я проверил ниже и другие связанные сообщения, но есть Не удачи Расширение липкого заголовка, которое работает, когда я прокручиваю весь документ, но когда я хочу, чтобы моя таблица находилась в контейнере для Div, он больше не работает.
my Codepen: Пример
Примечание: я разместил данные для примеров, но в действительности я использую Ajax для вызова всех данных, а затем инициализации таблицы после этого, поэтому я ничего не пишу внутри таблицы в таблице html вообще, и мне нужно, чтобы он остался таким. Чтобы Stackoverflow, так что я не уверен, что я все делаю правильно, я не смог бы превратить это в скрипку, но вот мой код, заранее спасибо. < /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 Smith", age: 34, city: "Los Angeles" },
{ name: "Jane Smith", age: 34, city: "Los Angeles" },
{ name: "Jane Smith", age: 34, 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: 200px; /* 設定 divA 高度為 50vh */
overflow: auto; /* 允許內部內容捲動 */
background-color: #e0e0e0;
padding: 20px;
position: relative; /* 需要這個來使 sticky 正常工作 */
}

/* 讓整個 table 設置 sticky */
#RealTable {
position: relative;
z-index: 1; /* 確保表格始終顯示 */
border-collapse: separate;
border-spacing:0;
text-align:center;
}

.sticky-header th {
position: sticky !important;
top: 0;
background-color: turquoise;
color: white;
z-index: 30 !important; /* 確保標題始終位於其他內容上方 */
}
.sticky-header th .th-inner {
position: sticky !important;
top: 0;
}

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

.content {
padding: 0px 0px 50px 0px;
}

.table {
width: 100%;
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