Wie kann man die Sticky-Header-Bootstrap-Tabelle in einem DIV mit dynamischen Daten halten? ⇐ Jquery

[Guest]

Ich verwende Bootstrap-table und dynamisch Hinzufügen meiner Daten in die Tabelle (einschließlich Header)
Ich habe unten und andere zugehörige Beiträge überprüft, aber es gibt es jedoch Kein Glück. Sticky-Header-Erweiterung, die funktioniert, wenn ich das gesamte Dokument scrolle, aber wenn ich möchte, dass meine Tabelle in einem Div-Container liegt, funktioniert es nicht mehr.
Mein Codepen: Beispiel
Hinweis: Ich habe Daten für Beispiele platziert, aber in Wirklichkeit verwende ich AJAX, um alle Daten aufzurufen, und dann initialisieren Sie danach die Tabelle, weshalb ich in der Tabelle nichts in der Tabelle schreibe HTML überhaupt, und ich muss es so bleiben. Um zu stapeln, bin ich nicht sicher, ob ich das richtig mache, ich könnte es nicht in eine Geige schaffen, aber hier ist mein Code, danke im Voraus. < /p>

Code: Select all

$(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

Aktuelle Arbeit (nicht stellvertretender Header):

Desirder -Ergebnis Ich möchte (Sticky -Header in der Tabelle):