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

[Anonymous]

Bearbeiten: Das Snippet unten wurde so behoben. Jetzt funktioniert es jetzt wie @Raghavendras Antwort für alle, die auch von Sticky-Header wie ich beunruhigt sind. Ich habe mich für meine benutzerdefinierte CSS anstelle der Bootstrap-Tabellenerweiterung entschieden. Header) < /p>
Ich habe mit dem How-to-Implement-Fixed-Header-für-Table-in-Stieftstrap und anderen verwandten Beiträgen überprüft, aber es gibt kein Glück. < /p>
und ich ausprobiert den Sticky-Header-Erweiterung von Bootstrap-Table , der 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 < /strong> Beispiel (ein fehlgeschlagener Versuch) < /p>
(Ich habe Daten für Beispiele platziert, aber in Wirklichkeit verwende ich Ajax, um sie aufzurufen Alle Daten, dann initialisieren Sie die Tabelle danach, weshalb ich in der HTML überhaupt nichts in die Tabelle schreibe, und ich brauche es, um so zu bleiben)
Aber nach Init hält der Header nicht mehr. < /p>
Der Sticky funktioniert in diesem Bild nicht Gewünschtes Ergebnis: < /strong> Der Header bleibt beim Scrollen in der Innenseite < /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 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 */
}
/* it was these bootstrap classes*/
.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