Wie kann ich den Körper eines Tisches scrollen lassen, den Kopf aber fixieren lassen?
Ich schreibe eine Seite, auf der ich eine HTML-Tabelle benötige, um eine festgelegte Größe zu erhalten. Ich brauche die Kopfzeilen oben in der Tabelle, um immer dort zu bleiben, aber ich brauche auch den Hauptteil der Tabelle, um zu scrollen, egal wie viele Zeilen der Tabelle hinzugefügt werden. Denken Sie an eine Mini-Version von Excel. Dies scheint eine einfache Aufgabe zu sein, aber fast jede Lösung, die ich im Web gefunden habe, hat einige Nachteile. Wie kann ich das lösen?
Ich musste die gleiche Antwort finden. Das beste Beispiel, das ich gefunden habe, ist http://www.cssplay.co.uk/menu/tablescroll.html - Ich fand, dass Beispiel # 2 für mich gut funktionierte. Sie müssen die Höhe der inneren Tabelle mit Java Script einstellen, der Rest ist CSS.
Ich fand DataTables ziemlich flexibel zu sein. Während die Standardversion auf jquery basiert, gibt es auch ein AngularJs Plugin .
Ich sah Sean Haddys hervorragende Lösung für eine ähnliche Frage und erlaubte mir einige Änderungen vorzunehmen :
- Verwenden Sie Klassen statt ID, sodass ein jQuery-Skript für mehrere Tabellen auf einer Seite wiederverwendet werden kann
- Unterstützung für semantische HTML-Tabellenelemente wie caption, thead, tfoot und tbody wurde hinzugefügt
- Die Bildlaufleiste ist optional, sodass sie nicht für Tabellen angezeigt wird, die "kürzer" sind als die Bildlaufhöhe
- Angepasste Breite der Bildlaufleiste, um die Bildlaufleiste an den rechten Rand der Tabelle zu bringen
- Konzept wurde durch .__ zugänglich gemacht.
- using aria-hidden = "true" für den statischen Tabellenkopf der injizierten Daten
- und lasse das Original an Ort und Stelle, einfach mit jQuery versteckt und
aria-hidden="false"gesetzt
- Beispiele für mehrere Tabellen mit unterschiedlichen Größen gezeigt
Sean hat das schwere Heben jedoch gemacht. Danke auch an Matt Burland für den Hinweis, dass er tfoot unterstützen muss.
Bitte sehen Sie selbst unter http://jsfiddle.net/jhfrench/eNP2N/
Haben Sie versucht, den Kopf und den Körper zu verwenden und eine feste Höhe für den Körper mit Überlauf festzulegen: Blättern?
Was sind Ihre Zielbrowser?
BEARBEITEN: Es hat (fast) in Firefox gut funktioniert - die Hinzufügung der vertikalen Bildlaufleiste machte auch die Notwendigkeit einer horizontalen Bildlaufleiste erforderlich - Yuck. IE Legen Sie einfach die Höhe jedes Td so fest, wie ich es als Körpergröße angegeben habe. Hier ist das Beste, was mir einfällt:
<html>
<head>
<title>Blah</title>
<style type="text/css">
table { width:300px; }
tbody { height:10em; overflow:scroll;}
td { height:auto; }
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>One</th><th>Two</th>
</td>
</tr>
</thead>
<tbody>
<tr><td>Data</td><td>Data</td></tr>
<tr><td>Data</td><td>Data</td></tr>
<tr><td>Data</td><td>Data</td></tr>
<tr><td>Data</td><td>Data</td></tr>
<tr><td>Data</td><td>Data</td></tr>
<tr><td>Data</td><td>Data</td></tr>
<tr><td>Data</td><td>Data</td></tr>
<tr><td>Data</td><td>Data</td></tr>
<tr><td>Data</td><td>Data</td></tr>
<tr><td>Data</td><td>Data</td></tr>
<tr><td>Data</td><td>Data</td></tr>
<tr><td>Data</td><td>Data</td></tr>
<tr><td>Data</td><td>Data</td></tr>
<tr><td>Data</td><td>Data</td></tr>
<tr><td>Data</td><td>Data</td></tr>
</tbody>
</table>
</body>
</html>
Was Sie brauchen, ist:
1) hat einen Tabellenkörper begrenzter Höhe, da der Bildlauf nur erfolgt, wenn der Inhalt größer als das Bildlauffenster ist. tbody kann jedoch nicht in der Größe geändert werden, und Sie müssen es als block anzeigen, um dies zu tun:
tbody {
overflow-y: auto;
display: block;
max-height: 10em; // For example
}
2) Re-Sync-Tabellenkopfbreite und Spaltenbreite des Tabellenspeichers, da letztere zu einer block gemacht wurden, wurde sie zu einem nicht zusammenhängenden Element. Die einzige Möglichkeit ist, die Synchronisation zu simulieren, indem die gleiche Spaltenbreite für beide erzwungen wird.
Da jedoch tbody selbst jetzt eine block ist, kann sie sich nicht mehr wie eine table verhalten. Da Sie nach wie vor ein table-Verhalten benötigen, um Ihre Spalten korrekt anzuzeigen, müssen Sie nach jeder einzelnen Zeile fragen, die als einzelnes tables angezeigt werden soll:
thead {
display: table;
width: 100%; // Fill the containing table
}
tbody tr {
display: table;
width: 100%; // Fill the containing table
}
(Beachten Sie, dass Sie mit dieser Technik keine Zeilen mehr überspannen können.).
Sobald dies erledigt ist, können Sie Spaltenbreiten erzwingen, um in thead und tbody die gleiche Breite zu haben. Das kannst du nicht:
- individuell für jede Spalte (durch spezifische CSS-Klassen oder Inline-Stil), was für jede Tabelleninstanz recht mühsam ist;
- einheitlich für alle Spalten (bis
th, td { width: 20%; }, wenn Sie beispielsweise 5 Spalten haben), was praktischer ist (es ist nicht erforderlich, die Breite für jede Tabelleninstanz festzulegen), kann jedoch nicht für die Spaltenanzahl verwendet werden - einheitlich für jede Spaltenanzahl durch festes Tabellenlayout.
Ich bevorzuge die letzte Option, die Folgendes hinzufügen muss:
thead {
table-layout: fixed; // Same layout for all cells
}
tbody tr {
table-layout: fixed; // Same layout for all cells
}
th, td {
width: auto; // Same width for all cells, if table has fixed layout
}
Sehen Sie sich eine Demo hier aus der Antwort auf diese Frage an.
Edit: Dies ist eine sehr alte Antwort und dient dem Wohlstand, nur um zu zeigen, dass sie in den 2000er Jahren einmal unterstützt wurde, aber wegen der Browser-Strategie in der 2010 sollte die W3C-Spezifikation auch dann eingehalten werden, wenn einige Funktionen entfernt wurden: Eine scrollbare Tabelle mit fester Kopf-/Fußzeile wurde vor HTML5 unbeholfen angegeben.
Schlechte Nachrichten
Leider gibt es keine elegante Möglichkeit, scrollbare Tabellen mit festem thead/tfoot zu handhaben, da HTML/CSS-Spezifikationen für diese Funktion nicht sehr klar sind .
Erklärungen
Obwohl HTML 4.01-Spezifikation sagt, dass thead/tfoot/tbody zum Scrollen des Tabellenkörpers verwendet werden (eingeführt?):
Tabellenzeilen können mit den Elementen THEAD, TFOOT [...] und TBODY gruppiert werden. Diese Unterteilung ermöglicht es Benutzerprogrammen, das Scrollen von Tabellenkörpern unabhängig von Kopf und Fuß der Tabelle zu unterstützen.
Die funktionierende Funktion für bildlauffähige Tabellen in FF 3.6 wurde in FF 3.7 entfernt, da sie als Fehler angesehen wird, da sie nicht den HTML/CSS-Spezifikationen entspricht. Siehe this und that Kommentare zu FF-Fehlern.
Tipp zum Mozilla Developer Network
Unten finden Sie eine vereinfachte Version der MDN-Tipps für scrollbare Tabellen .
siehe diese archivierte Seite oder aktuelle französische Version
<style type="text/css">
table {
border-spacing: 0; /* workaround */
}
tbody {
height: 4em; /* define the height */
overflow-x: hidden; /* esthetics */
overflow-y: auto; /* allow scrolling cells */
}
td {
border-left: 1px solid blue; /* workaround */
border-bottom: 1px solid blue; /* workaround */
}
</style>
<table>
<thead><tr><th>Header
<tfoot><tr><th>Footer
<tbody>
<tr><td>Cell 1 <tr><td>Cell 2
<tr><td>Cell 3 <tr><td>Cell 4
<tr><td>Cell 5 <tr><td>Cell 6
<tr><td>Cell 7 <tr><td>Cell 8
<tr><td>Cell 9 <tr><td>Cell 10
<tr><td>Cell 11 <tr><td>Cell 12
<tr><td>Cell 13 <tr><td>Cell 14
</tbody>
</table>
Allerdings sagt MDN auch dies funktioniert nicht mehr auf FF :-(
Ich habe auch auf IE8 getestet => Tabelle ist auch nicht scrollbar: - ((
Diese Lösung funktioniert in Chrome 35, Firefox 30 und IE 11 (andere Versionen wurden nicht getestet)
Sein reines CSS: http://jsfiddle.net/ffabreti/d4sope1u/
Alles wird angezeigt: Block, Tabelle benötigt eine Höhe:
table {
overflow: scroll;
display: block; /*inline-block*/
height: 120px;
}
thead > tr {
position: absolute;
display: block;
padding: 0;
margin: 0;
top: 0;
background-color: gray;
}
tbody > tr:nth-of-type(1) {
margin-top: 16px;
}
tbody tr {
display: block;
}
td, th {
width: 70px;
border-style:solid;
border-width:1px;
border-color:black;
}
Ich bin mir nicht sicher, ob sich noch jemand damit beschäftigt, aber wie ich es bisher getan habe, ist die Verwendung der ersten Originaltabelle mit zwei Tabellen - die erste nur die Titelzeile der ursprünglichen Tabelle und keine Tabellenzeilen (oder eine leere Textzeile) es validieren).
Die zweite ist in einem separaten div und hat keinen Titel und nur die ursprünglichen Tabellenkörperzeilen. Das separate div wird dann scrollbar gemacht.
Die zweite Tabelle in ihrem div befindet sich direkt unter der ersten Tabelle im HTML-Code und sieht aus wie eine einzelne Tabelle mit einem festen Header und einem scrollbaren unteren Abschnitt. Ich habe dies nur in Safari, Firefox und IE getestet (jeweils neueste Version im Frühjahr 2010), aber es hat in allen funktioniert.
Das einzige Problem dabei war, dass die erste Tabelle ohne Text nicht validiert werden konnte (W3.org-Validator - XHTML 1.0 strict). Wenn ich eine Tabelle ohne Inhalt hinzufügte, führt dies zu einer leeren Zeile. Sie können CSS verwenden, um dies nicht sichtbar zu machen, belegt aber dennoch Platz auf der Seite.
Dies bereitete mir große Schwierigkeiten, ein solches Raster für eine unserer Anwendungen zu implementieren. Ich habe alle verschiedenen Techniken ausprobiert, aber beide hatten Probleme. Am nächsten kam ich mit einem jQuery-Plugin wie Flexigrid (siehe http://www.ajaxrain.com nach Alternativen), aber dies scheint keine 100% breiten Tabellen zu unterstützen, was tatsächlich der Fall ist was ich brauchte.
Was ich am Ende tat, war, mein eigenes zu rollen; Firefox unterstützt das Scrollen von tbody-Elementen. Deshalb habe ich im Browser gesuchte und entsprechende CSS (Einstellung der Höhe, Überlauf usw.) verwendet, um weitere Informationen zu erhalten. Für die anderen Browser verwendete ich zwei separate Tabellen, die table-layout: fixed verwenden Ein Größenalgorithmus, der garantiert, um die angegebene Größe nicht zu überschreiten (normale Tabellen werden erweitert, wenn der Inhalt zu groß ist, um zu passen). Indem ich beide Tabellen mit identischen Breiten versehen habe, konnte ich ihre Spalten anordnen. Ich wickelte den zweiten Teil in ein div-Set ein, um zu scrollen, und mit ein bisschen Jiggery-Pokery mit Rändern usw. gelang es mir, das gewünschte Aussehen und Gefühl zu erzielen.
Tut mir leid, wenn sich diese Antwort stellenweise etwas vage anhört. Ich schreibe schnell, da ich nicht viel Zeit habe. Hinterlasse einen Kommentar, wenn du mich weiter ausbauen willst!
Hier ist ein Code, der wirklich für IE und FF (zumindest) funktioniert:
<html>
<head>
<title>Test</title>
<style type="text/css">
table{
width: 400px;
}
tbody {
height: 100px;
overflow: scroll;
}
div {
height: 100px;
width: 400px;
position: relative;
}
tr.alt td {
background-color: #EEEEEE;
}
</style>
<!--[if IE]>
<style type="text/css">
div {
overflow-y: scroll;
overflow-x: hidden;
}
thead tr {
position: absolute;
top: expression(this.offsetParent.scrollTop);
}
tbody {
height: auto;
}
</style>
<![endif]-->
</head>
<body>
<div >
<table border="0" cellspacing="0" cellpadding="0">
<thead>
<tr>
<th style="background: lightgreen;">user</th>
<th style="background: lightgreen;">email</th>
<th style="background: lightgreen;">id</th>
<th style="background: lightgreen;">Y/N</th>
</tr>
</thead>
<tbody align="center">
<!--[if IE]>
<tr>
<td colspan="4">on IE it's overridden by the header</td>
</tr>
<![endif]-->
<tr>
<td>user 1</td>
<td>[email protected]</td>
<td>1</td>
<td>Y</td>
</tr>
<tr class="alt">
<td>user 2</td>
<td>[email protected]</td>
<td>2</td>
<td>N</td>
</tr>
<tr>
<td>user 3</td>
<td>[email protected]</td>
<td>3</td>
<td>Y</td>
</tr>
<tr class="alt">
<td>user 4</td>
<td>[email protected]</td>
<td>4</td>
<td>N</td>
</tr>
<tr>
<td>user 5</td>
<td>[email protected]</td>
<td>5</td>
<td>Y</td>
</tr>
<tr class="alt">
<td>user 6</td>
<td>[email protected]</td>
<td>6</td>
<td>N</td>
</tr>
<tr>
<td>user 7</td>
<td>[email protected]</td>
<td>7</td>
<td>Y</td>
</tr>
<tr class="alt">
<td>user 8</td>
<td>[email protected]</td>
<td>8</td>
<td>N</td>
</tr>
</tbody>
</table>
</div>
</body></html>
Ich habe den Originalcode geändert, um ihn übersichtlicher zu gestalten und auch in IE und FF korrekt zu funktionieren.
Originalcode HIER
Hier ist meine Alternative. Es verwendet auch verschiedene DIVs für die Kopfzeile, den Hauptteil und die Fußzeile, aber synchronisiert für die Größenänderung von Fenstern und für das Suchen, Scrollen, Sortieren, Filtern und Positionieren:
Klicken Sie auf die Schaltflächen Jazz, Klassik ..., um die Tabellen anzuzeigen. Es ist so eingerichtet, dass es auch bei deaktiviertem JavaScript ausreichend ist.
Scheint auf IE, FF und WebKit (Chrome, Safari) in Ordnung zu sein.
Live JsFiddle
Dies ist nur mit HTML & CSS möglich
table.scrollTable {
border: 1px solid #963;
width: 718px;
}
thead.fixedHeader {
display: block;
}
thead.fixedHeader tr {
height: 30px;
background: #c96;
}
thead.fixedHeader tr th {
border-right: 1px solid black;
}
tbody.scrollContent {
display: block;
height: 262px;
overflow: auto;
}
tbody.scrollContent td {
background: #eee;
border-right: 1px solid black;
height: 25px;
}
tbody.scrollContent tr.alternateRow td {
background: #fff;
}
thead.fixedHeader th {
width: 233px;
}
thead.fixedHeader th:last-child {
width: 251px;
}
tbody.scrollContent td {
width: 233px;
}<table cellspacing="0" cellpadding="0" class="scrollTable">
<thead class="fixedHeader">
<tr class="alternateRow">
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
</thead>
<tbody class="scrollContent">
<tr class="normalRow">
<td>Cell Content 1</td>
<td>Cell Content 2</td>
<td>Cell Content 3</td>
</tr>
<tr class="alternateRow">
<td>More Cell Content 1</td>
<td>More Cell Content 2</td>
<td>More Cell Content 3</td>
</tr>
<tr class="normalRow">
<td>Even More Cell Content 1</td>
<td>Even More Cell Content 2</td>
<td>Even More Cell Content 3</td>
</tr>
<tr class="alternateRow">
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>And Repeat 3</td>
</tr>
<tr class="normalRow">
<td>Cell Content 1</td>
<td>Cell Content 2</td>
<td>Cell Content 3</td>
</tr>
<tr class="alternateRow">
<td>More Cell Content 1</td>
<td>More Cell Content 2</td>
<td>More Cell Content 3</td>
</tr>
<tr class="normalRow">
<td>Even More Cell Content 1</td>
<td>Even More Cell Content 2</td>
<td>Even More Cell Content 3</td>
</tr>
<tr class="alternateRow">
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>And Repeat 3</td>
</tr>
<tr class="normalRow">
<td>Cell Content 1</td>
<td>Cell Content 2</td>
<td>Cell Content 3</td>
</tr>
<tr class="alternateRow">
<td>More Cell Content 1</td>
<td>More Cell Content 2</td>
<td>More Cell Content 3</td>
</tr>
<tr class="normalRow">
<td>Even More Cell Content 1</td>
<td>Even More Cell Content 2</td>
<td>Even More Cell Content 3</td>
</tr>
<tr class="alternateRow">
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>And Repeat 3</td>
</tr>
<tr class="normalRow">
<td>Cell Content 1</td>
<td>Cell Content 2</td>
<td>Cell Content 3</td>
</tr>
<tr class="alternateRow">
<td>More Cell Content 1</td>
<td>More Cell Content 2</td>
<td>More Cell Content 3</td>
</tr>
<tr class="normalRow">
<td>Even More Cell Content 1</td>
<td>Even More Cell Content 2</td>
<td>Even More Cell Content 3</td>
</tr>
<tr class="alternateRow">
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>And Repeat 3</td>
</tr>
<tr class="normalRow">
<td>Cell Content 1</td>
<td>Cell Content 2</td>
<td>Cell Content 3</td>
</tr>
<tr class="alternateRow">
<td>More Cell Content 1</td>
<td>More Cell Content 2</td>
<td>More Cell Content 3</td>
</tr>
<tr class="normalRow">
<td>Even More Cell Content 1</td>
<td>Even More Cell Content 2</td>
<td>Even More Cell Content 3</td>
</tr>
<tr class="alternateRow">
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>And Repeat 3</td>
</tr>
<tr class="normalRow">
<td>Cell Content 1</td>
<td>Cell Content 2</td>
<td>Cell Content 3</td>
</tr>
<tr class="alternateRow">
<td>More Cell Content 1</td>
<td>More Cell Content 2</td>
<td>More Cell Content 3</td>
</tr>
<tr class="normalRow">
<td>Even More Cell Content 1</td>
<td>Even More Cell Content 2</td>
<td>Even More Cell Content 3</td>
</tr>
<tr class="alternateRow">
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>And Repeat 3</td>
</tr>
<tr class="normalRow">
<td>Cell Content 1</td>
<td>Cell Content 2</td>
<td>Cell Content 3</td>
</tr>
<tr class="alternateRow">
<td>More Cell Content 1</td>
<td>More Cell Content 2</td>
<td>More Cell Content 3</td>
</tr>
<tr class="normalRow">
<td>Even More Cell Content 1</td>
<td>Even More Cell Content 2</td>
<td>Even More Cell Content 3</td>
</tr>
<tr class="alternateRow">
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>And Repeat 3</td>
</tr>
<tr class="normalRow">
<td>Cell Content 1</td>
<td>Cell Content 2</td>
<td>Cell Content 3</td>
</tr>
<tr class="alternateRow">
<td>More Cell Content 1</td>
<td>More Cell Content 2</td>
<td>More Cell Content 3</td>
</tr>
<tr class="normalRow">
<td>Even More Cell Content 1</td>
<td>Even More Cell Content 2</td>
<td>Even More Cell Content 3</td>
</tr>
<tr class="alternateRow">
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>And Repeat 3</td>
</tr>
<tr class="normalRow">
<td>Cell Content 1</td>
<td>Cell Content 2</td>
<td>Cell Content 3</td>
</tr>
<tr class="alternateRow">
<td>More Cell Content 1</td>
<td>More Cell Content 2</td>
<td>More Cell Content 3</td>
</tr>
<tr class="normalRow">
<td>Even More Cell Content 1</td>
<td>Even More Cell Content 2</td>
<td>Even More Cell Content 3</td>
</tr>
<tr class="alternateRow">
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>And Repeat 3</td>
</tr>
<tr class="normalRow">
<td>Cell Content 1</td>
<td>Cell Content 2</td>
<td>Cell Content 3</td>
</tr>
<tr class="alternateRow">
<td>More Cell Content 1</td>
<td>More Cell Content 2</td>
<td>More Cell Content 3</td>
</tr>
<tr class="normalRow">
<td>Even More Cell Content 1</td>
<td>Even More Cell Content 2</td>
<td>Even More Cell Content 3</td>
</tr>
<tr class="alternateRow">
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>And Repeat 3</td>
</tr>
<tr class="normalRow">
<td>Cell Content 1</td>
<td>Cell Content 2</td>
<td>Cell Content 3</td>
</tr>
<tr class="alternateRow">
<td>More Cell Content 1</td>
<td>More Cell Content 2</td>
<td>More Cell Content 3</td>
</tr>
<tr class="normalRow">
<td>Even More Cell Content 1</td>
<td>Even More Cell Content 2</td>
<td>Even More Cell Content 3</td>
</tr>
<tr class="alternateRow">
<td>End of Cell Content 1</td>
<td>End of Cell Content 2</td>
<td>End of Cell Content 3</td>
</tr>
</tbody>
</table>Das Hauptproblem, das ich mit den oben genannten Vorschlägen hatte, bestand darin, das Einfügen von tablesorter.js UND das Verschieben der Header für eine Tabelle, die auf eine bestimmte maximale Größe beschränkt ist, zu ermöglichen. Ich stolperte schließlich über das Plugin jQuery.floatThead , das die schwebenden Header bereitstellte und die Sortierung weiterhin funktionieren ließ.
Es hat auch eine Nizza Vergleichsseite, die sich vs ähnliche Plugins zeigt.
Entschuldigung, ich habe nicht alle Antworten auf Ihre Frage gelesen.
Ja hier das, was du willst (habe ich schon gemacht)
Sie können zwei Tabellen mit demselben Klassennamen für eine ähnliche Formatierung verwenden, eine nur mit Tabellenkopf und eine andere mit Ihren Zeilen .. __ Stellen Sie diese Tabelle nun in ein Div mit fester Höhe mit Überlauf-y: auto OR scroll .
Wenn es in Ordnung ist, JavaScript zu verwenden, ist dies meine Lösung Erstellen Sie eine feste Tabelle für alle Spalten (Pixel!). Fügen Sie der Klasse die Klasse Scrollify hinzu und fügen Sie diese Einstellung für JavaScript + Jquery 1.4.x in CSS oder Style hinzu!
Getestet in: Opera, Chrome, Safari, FF, IE5.5 ( Fehlerhaftes Epic-Skript ), IE6, IE7, IE8, IE9
//Usage add Scrollify class to a table where all columns (header and body) have a fixed pixel width
$(document).ready(function () {
$("table.Scrollify").each(function (index, element) {
var header = $(element).children().children().first();
var headerHtml = header.html();
var width = $(element).outerWidth();
var height = parseInt($(element).css("height")) - header.outerHeight();
$(element).height("auto");
header.remove();
var html = "<table style=\"border-collapse: collapse;\" border=\"1\" rules=\"all\" cellspacing=\"0\"><tr>" + headerHtml +
"</tr></table><div style=\"overflow: auto;border:0;margin:0;padding:0;height:" + height + "px;width:" + (parseInt(width) + scrollbarWidth()) + "px;\">" +
$(element).parent().html() + "</div>";
$(element).parent().html(html);
});
});
//Function source: http://www.fleegix.org/articles/2006-05-30-getting-the-scrollbar-width-in-pixels
//License: Apache License, version 2
function scrollbarWidth() {
var scr = null;
var inn = null;
var wNoScroll = 0;
var wScroll = 0;
// Outer scrolling div
scr = document.createElement('div');
scr.style.position = 'absolute';
scr.style.top = '-1000px';
scr.style.left = '-1000px';
scr.style.width = '100px';
scr.style.height = '50px';
// Start with no scrollbar
scr.style.overflow = 'hidden';
// Inner content div
inn = document.createElement('div');
inn.style.width = '100%';
inn.style.height = '200px';
// Put the inner div in the scrolling div
scr.appendChild(inn);
// Append the scrolling div to the doc
document.body.appendChild(scr);
// Width of the inner div sans scrollbar
wNoScroll = inn.offsetWidth;
// Add the scrollbar
scr.style.overflow = 'auto';
// Width of the inner div width scrollbar
wScroll = inn.offsetWidth;
// Remove the scrolling div from the doc
document.body.removeChild(
document.body.lastChild);
// Pixel width of the scroller
return (wNoScroll - wScroll);
}
Edit: Feste Höhe.
Ich mache dies mit Javascript (keine Bibliothek) und CSS - der Tabellenkörper scrollt mit der Seite, und die Tabelle muss keine feste Breite oder Höhe haben, obwohl jede Spalte eine Breite haben muss. Sie können auch die Sortierfunktion beibehalten.
Grundsätzlich gilt:
Erstellen Sie in HTML Container divs, um die Tabellenkopfzeile und den Tabellenkörper zu positionieren. Erstellen Sie außerdem ein "mask" div, um den Tabellenkörper auszublenden, wenn er über den Header hinausläuft
Konvertieren Sie in CSS die Tabellenteile in Blöcke
Ermitteln Sie in Javascript die Tabellenbreite und passen Sie die Breite der Maske an. Get Die Höhe des Seiteninhalts ... messen Sie die Bildlaufposition ... Manipulieren Sie CSS, um die Position der Tabellenkopfzeilenzeile und die Maske festzulegenHöhe
Hier ist das Javascript und eine jsFiddle-DEMO.
// get table width and match the mask width
function setMaskWidth() {
if (document.getElementById('mask') !==null) {
var tableWidth = document.getElementById('theTable').offsetWidth;
// match elements to the table width
document.getElementById('mask').style.width = tableWidth + "px";
}
}
function fixTop() {
// get height of page content
function getScrollY() {
var y = 0;
if( typeof ( window.pageYOffset ) == 'number' ) {
y = window.pageYOffset;
} else if ( document.body && ( document.body.scrollTop) ) {
y = document.body.scrollTop;
} else if ( document.documentElement && ( document.documentElement.scrollTop) ) {
y = document.documentElement.scrollTop;
}
return [y];
}
var y = getScrollY();
var y = y[0];
if (document.getElementById('mask') !==null) {
document.getElementById('mask').style.height = y + "px" ;
if (document.all && document.querySelector && !document.addEventListener) {
document.styleSheets[1].rules[0].style.top = y + "px" ;
} else {
document.styleSheets[1].cssRules[0].style.top = y + "px" ;
}
}
}
window.onscroll = function() {
setMaskWidth();
fixTop();
}
Wenn Sie über genügend Standards verfügen;), können Sie eine Tabelle platzieren, die nur einen Header enthält, direkt über einer Tabelle, die nur einen Hauptteil enthält. Es wird nicht horizontal gescrollt, aber wenn Sie das nicht brauchen ...
Für mich funktionierte nichts im Zusammenhang mit dem Scrollen, bis ich die Breite aus der Tabelle CSS entfernte. Ursprünglich sah das Tabellen-CSS so aus:
.table-fill {
background: white;
border-radius:3px;
border-collapse: collapse;
margin: auto;
width: 100%;
max-width: 800px;
padding:5px;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
animation: float 5s infinite;
}
Sobald ich die Breite entfernte: 100%; Alle Bildlauffunktionen funktionierten.