Ich verwende eine Datentabelle, für die ich das traditionelle Tabellen-Markup verwende, aber was ich will ist, dass meine Tabelle von irgendwo auf der Seite startet und ich möchte, dass meine Tabellen-Überschrift dort fixiert wird, wo sie beginnt und der Tabellen-Body durchsucht werden soll die verbleibende Seitenhöhe
Ich zeige hier ein kleines Beispiel
Ссылка
Ich weiß, wir können es von flex-box reaktionsfähiger Tabelle bekommen, aber meine Einschränkung ist, dass ich traditionelles Tabellen-Markup verwenden muss, also wenn ich es anders gebe als flexbox reaktionsfähige Tabelle
Vielen Dank
Scrollbare Tabellen + feste Header-Tricks können nicht mit automatischen Spaltenbreiten arbeiten. Dies liegt daran, dass sie die Anzeigeeigenschaft von tbody element ändern, wodurch eine neue ( anonyme ) Tabelle mit unterschiedlichen Spaltenbreiten erstellt wird.
Die beste Lösung, die ich mir vorstellen kann, ist, eine Kopie der Tabelle zu erstellen (so dass beide den gleichen Inhalt und daher identische Spaltenbreiten haben) und sie unabhängig zu manipulieren.
Im folgenden Beispiel verwende ich jQuery, um eine Kopie der Tabelle und visibility: collapse zu erstellen, um den Tabellenkopf und -textkörper zu verbergen:
Beachten Sie, dass visibility: collapse nicht in allen Browsern richtig implementiert ist. Alternative Lösung besteht darin, die zwei Tabellen in divs zu umbrechen: fixed height div für die Header-Tabelle, scrollbares div für die body-Tabelle. Aber dann müssen Sie die Höhe des Headers festlegen.
Sie möchten, dass etwas wie diese Kopfzeile oben auf der Seite hängt.
Probieren Sie position: sticky für Ihre thead aus.
Sie müssen es auf th anwenden, um in allen Browsern zu funktionieren.
Um es von seiner aktuellen Position zu kleben, können Sie ein wenig Javascript verwenden:
%Vor% Es mag jetzt etwas komisch im Stift aussehen (Überlappung / Transparenz), aber wenn Sie sagen, dass Inhalt über dem thead liegt (eine Kopfzeile, eine Alarmbox, ..), wenden Sie einfach zIndex höher an als der Tisch, und es sollte gut aussehen.
Ich arbeite gerade an einer Website mit einer Fullscreen-Tabelle, einem Sticky-Header und einem Block mit variabler Höhe darüber, und das ist es, was ich benutze (obwohl der Offset mit AngularJS etwas anders berechnet wird).
Tags und Links html css css3 html-table flexbox