Czy istnieje technika CSS / JavaScript dla różnych przeglądarek, która wyświetla długą tabelę HTML, tak aby nagłówki kolumn pozostały nieruchome na ekranie i nie przewijały się wraz z treścią tabeli. Pomyśl o efekcie „zamrożenia okien” w programie Microsoft Excel.
Chcę móc przewijać zawartość tabeli, ale zawsze widzieć nagłówki kolumn u góry.
javascript
css
html-table
Cheekysoft
źródło
źródło
thead th { position: sticky; top: 0; }
. Safari potrzebuje prefiksu dostawcy:-webkit-sticky
Odpowiedzi:
Przez jakiś czas szukałem rozwiązania tego problemu i stwierdziłem, że większość odpowiedzi nie działa lub nie pasuje do mojej sytuacji, dlatego napisałem proste rozwiązanie w jQuery.
Oto zarys rozwiązania:
Poniżej znajduje się kod w uruchomionej wersji demonstracyjnej.
To rozwiązanie działa w Chrome i IE. Ponieważ jest oparty na jQuery, powinno to również działać w innych przeglądarkach obsługiwanych przez jQuery.
źródło
Można to rozwiązać w czterech wierszach kodu.
Jeśli zależy Ci tylko na nowoczesnych przeglądarkach, można znacznie łatwiej uzyskać stały nagłówek, używając transformacji CSS. Brzmi dziwnie, ale działa świetnie:
Obsługa transformacji CSS jest szeroko dostępna, z wyjątkiem przeglądarki Internet Explorer 8-.
Oto pełny przykład w celach informacyjnych:
Pokaż fragment kodu
źródło
$(this).addClass('border')
zmienia resztę tabeli zawiera czcionki, rozmiar, kolor, który przekazuję w klasie granicznej. Ale nie dodaje wierszy do stałego nagłówka. Doceń, wszelkie dane wejściowe, jak to naprawićWłaśnie skończyłem układać wtyczkę jQuery, która pobierze prawidłową pojedynczą tabelę przy użyciu prawidłowego HTML (musi mieć thead i tbody) i wyświetli tabelę, która ma stałe nagłówki, opcjonalnie stała stopka, która może być albo sklonowanym nagłówkiem, albo dowolnym wybrane treści (paginacja itp.). Jeśli chcesz skorzystać z większych monitorów, przeskaluje on również tabelę przy zmianie rozmiaru przeglądarki. Kolejną dodaną funkcją jest możliwość przewijania z boku, jeśli kolumny tabeli nie mogą się zmieścić w widoku.
http://fixedheadertable.com/
na github: http://markmalek.github.com/Fixed-Header-Table/
Jest niezwykle łatwy w konfiguracji i możesz tworzyć własne niestandardowe style. Używa również zaokrąglonych rogów we wszystkich przeglądarkach. Pamiętaj, że właśnie ją wypuściłem, więc nadal jest technicznie w wersji beta i jest kilka drobnych problemów, które rozwiązuję.
Działa w Internet Explorer 7, Internet Explorer 8, Safari, Firefox i Chrome.
źródło
Stworzyłem również wtyczkę, która rozwiązuje ten problem. Mój projekt - jQuery.floatThead istnieje już od ponad 4 lat i jest bardzo dojrzały.
Nie wymaga zewnętrznych stylów i nie oczekuje, że Twój stół będzie stylizowany w jakikolwiek szczególny sposób. Obsługuje Internet Explorer9 + i Firefox / Chrome.
Obecnie (2018-05) ma:
Wiele (nie wszystkie) odpowiedzi tutaj to szybkie hacki, które mogły rozwiązać problem jednej osoby, ale nie będą działać na każdym stole.
Niektóre inne wtyczki są stare i prawdopodobnie działają świetnie z Internet Explorerem, ale będą działać w Firefox i Chrome.
źródło
TL; DR
Jeśli celujesz w nowoczesne przeglądarki i nie potrzebujesz ekstrawaganckich stylizacji: http://jsfiddle.net/dPixie/byB9d/3/ ... Mimo że wersja z czterema dużymi wersjami jest całkiem słodka, ta wersja lepiej radzi sobie z szerokością płynu.
Dobre wieści wszyscy!
Dzięki postępom HTML5 i CSS3 jest to teraz możliwe, przynajmniej w przypadku nowoczesnych przeglądarek. Lekko hackerską implementację, którą wymyśliłem, można znaleźć tutaj: http://jsfiddle.net/dPixie/byB9d/3/ . Przetestowałem to w FX 25, Chrome 31 i IE 10 ...
Trafny HTML (wstaw dokument HTML5 na górze dokumentu):
Ale jak?!
Mówiąc prosto, masz nagłówek tabeli, który wizualnie ukrywasz, ustawiając go na 0px, który zawiera również div używane jako stały nagłówek. Pojemnik stołu pozostawia wystarczająco dużo miejsca u góry, aby umożliwić umieszczenie nagłówka w absolutnie ustawionej pozycji, a stół z paskami przewijania wygląda tak, jak można się spodziewać.
Powyższy kod wykorzystuje klasę pozycjonowaną do absolutnego pozycjonowania tabeli (używam jej w wyskakującym oknie dialogowym), ale możesz również użyć jej w obiegu dokumentu, usuwając
positioned
klasę z kontenera.Ale ...
To nie jest idealne. Firefox nie chce, aby wiersz nagłówka wynosił 0 pikseli (przynajmniej nie znalazłem żadnego sposobu), ale uparcie utrzymuje go na poziomie co najmniej 4 pikseli ... To nie jest duży problem, ale w zależności od stylu będzie bałaganił twoje granice itp.
W tabeli zastosowano również fikcyjną kolumnę, w której kolor tła samego kontenera jest używany jako tło dla div div nagłówka, które są przezroczyste.
Podsumowanie
Podsumowując, mogą występować problemy ze stylizacją w zależności od twoich wymagań, szczególnie obramowania lub skomplikowanego tła. Mogą występować również problemy z obliczalnością, nie sprawdziłem go jeszcze w wielu różnych przeglądarkach (jeśli wypróbujesz, skomentuj swoje doświadczenia), ale nie znalazłem czegoś podobnego, więc pomyślałem, że warto opublikować tak czy siak ...
źródło
<section>
element, musi być ograniczony wysokością tylko po to, aby zmusić go do przepełnienia i pokazać przewijanie. Każdy układ, który spowoduje przepełnienie kontenera, będzie działał. Jeśli znajdziesz przypadek, w którym go nie ma, opublikuj link do skrzypce.padding-top
wartość oznacza również, że jeśli tekst nagłówka tabeli znajduje się w więcej niż jednym wierszu, pojawi się na górze komórek tabeli. Szkoda, bo przez większość czasu działa to jak urok. Naprawdę fajna sztuczkadiv
wth
celu obejścia problemu zmiany rozmiaru kolumny, który ma większość innych rozwiązań.Wszystkie próby rozwiązania tego spoza specyfikacji CSS są bladym cieniem tego, czego naprawdę chcemy: Dostarczenie na podstawie domniemanej obietnicy THEAD.
Ten problem z zawieszonymi nagłówkami przy stole od dłuższego czasu stanowi otwartą ranę w HTML / CSS.
W idealnym świecie rozwiązanie tego problemu byłoby oparte wyłącznie na CSS. Niestety, wydaje się, że nie ma dobrego.
Odpowiednie dyskusje dotyczące standardów na ten temat obejmują:
AKTUALIZACJA : Firefox jest dostarczany
position:sticky
w wersji 32. Wszyscy wygrywają!źródło
thead th { position: sticky; top: 0; }
. Czy możemy zaktualizować tę odpowiedź, aby wyraźnie to stwierdzić?Oto wtyczka jQuery do stałych nagłówków tabel. Pozwala przewijać całą stronę, zamrażając nagłówek, gdy osiągnie górę. Działa dobrze z tabelami Bootstrap na Twitterze .
Repozytorium GitHub: https://github.com/oma/table-fixed-header
Robi nie przewijać tylko tabelę zawartości. Spójrz na inne narzędzia do tego, jako jedną z tych innych odpowiedzi. Ty decydujesz, co najlepiej pasuje do Twojej skrzynki.
źródło
Większość zamieszczonych tutaj rozwiązań wymaga jQuery. Jeśli szukasz niezależnego od frameworka rozwiązania, wypróbuj Grid: http://www.matts411.com/post/grid/
Jest hostowany na Github tutaj: https://github.com/mmurph211/Grid
Obsługuje nie tylko stałe nagłówki, ale także między innymi stałe lewe kolumny i stopki.
źródło
Właściwość CSS
position: sticky
ma świetne wsparcie w większości nowoczesnych przeglądarek (miałem problemy z Edge, patrz poniżej).To pozwala nam dość łatwo rozwiązać problem stałych nagłówków:
Safari potrzebuje przedrostka dostawcy:
-webkit-sticky
.W przypadku przeglądarki Firefox musiałem dodać
min-height: 0
do jednego elementy nadrzędne. Zapominam dokładnie, dlaczego było to potrzebne.Niestety, implementacja Microsoft Edge wydaje się działać tylko częściowo. Przynajmniej miałem trochę migotania i niedopasowanych komórek tabeli podczas moich testów. Stół był nadal użyteczny, ale miał poważne problemy estetyczne.
źródło
position: sticky;
z tabelą wewnątrz div, które maoverflow: scroll;
,overflow-x: scroll;
luboverflow-y: scroll;
. wydaje się być najlepszym i najprostszym rozwiązaniem dla stałych nagłówków tabel i kolumn we współczesnych przeglądarkach. Ta odpowiedź musi zostać wybrana na szczyt.Bardziej dopracowana czysta tabela przewijania CSS
Wszystkie czyste rozwiązania CSS, które do tej pory widziałem - choć mogą być sprytne - nie mają pewnego poziomu dopracowania lub po prostu nie działają poprawnie w niektórych sytuacjach. Postanowiłem więc stworzyć własny ...
Cechy:
Oto kilka skrzypiec, które pokazują opcje płynów i automatycznej szerokości:
Płynna szerokość i wysokość (dostosowuje się do rozmiaru ekranu): jsFiddle (Zauważ, że pasek przewijania pojawia się tylko w razie potrzeby w tej konfiguracji, więc może być konieczne zmniejszenie ramki, aby ją zobaczyć)
Automatyczna szerokość, stała wysokość (łatwiejsza integracja z innymi treściami): jsFiddle
Konfiguracja automatycznej szerokości i stałej wysokości prawdopodobnie ma więcej przypadków użycia, więc opublikuję poniższy kod.
Metoda zastosowana do zamrożenia wiersza nagłówka jest podobna do metody d-Pixie, więc wyjaśnienia znajdziesz w jego poście. W tej technice było mnóstwo błędów i ograniczeń, które można naprawić tylko za pomocą sterty dodatkowego CSS i dodatkowego kontenera div lub dwóch.
źródło
Prosta wtyczka jQuery
Jest to odmiana rozwiązania Mahesa. Możesz to tak nazwać
$('table#foo').scrollableTable();
Chodzi o to:
thead
itbody
na osobnetable
elementytable
wdiv.scrollable
div.scrollable
przewijaćCSS może być:
Ostrzeżenia
To powiedziawszy, działa dla moich celów i możesz go wziąć i zmodyfikować.
Oto wtyczka:
źródło
:)
Nie tak czyste, ale czyste rozwiązanie HTML / CSS.
Zaktualizowano dla przykładu IE8 + JSFiddle
źródło
Wsparcie dla stałej stopki
Rozszerzyłem funkcję Nathana, aby obsługiwał również stałą stopkę i maksymalną wysokość. Ponadto funkcja ustawi sam CSS, a Ty musisz jedynie obsługiwać szerokość.
Stosowanie:
Naprawiono wysokość:
Maksymalna wysokość (jeśli przeglądarka obsługuje opcję CSS „maksymalna wysokość”):
Scenariusz:
źródło
W jakiś sposób udało mi się
Position:Sticky
dobrze pracować nad moją sprawą:źródło
Dwa divy, jeden dla nagłówka, jeden dla danych. Ustaw przewijanie danych div i użyj JavaScript, aby ustawić szerokość kolumn w nagłówku, aby były takie same jak szerokości w danych. Myślę, że szerokości kolumn danych powinny być ustalone, a nie dynamiczne.
źródło
Zdaję sobie sprawę, że pytanie pozwala na JavaScript, ale tutaj opracowałem czyste rozwiązanie CSS, które pozwala również na powiększanie tabeli w poziomie. Został przetestowany z Internet Explorerem 10 i najnowszymi przeglądarkami Chrome i Firefox. Link do jsFiddle znajduje się na dole.
HTML:
A CSS:
http://jsfiddle.net/HNHRv/3/
źródło
Dla tych, którzy wypróbowali dobre rozwiązanie podane przez Maximiliana Hilsa i nie udało mu się go uruchomić z Internet Explorerem, miałem ten sam problem (Internet Explorer 11) i dowiedziałem się, na czym polega problem.
W Internet Explorer 11 transformacja stylu (przynajmniej z tłumaczeniem) nie działa
<THEAD>
. Rozwiązałem to, stosując styl do wszystkich<TH>
pętli. To się udało. Mój kod JavaScript wygląda następująco:W moim przypadku tabelą był GridView w ASP.NET. Najpierw myślałem, że dzieje się tak, ponieważ nie ma
<THEAD>
, ale nawet kiedy zmusiłem go do posiadania, nie działało. Potem dowiedziałem się, co napisałem powyżej.To bardzo ładne i proste rozwiązanie. W Chrome jest idealny, w Firefoksie nieco nierówny, a w Internet Explorerze jeszcze bardziej gwałtowny. Ale w sumie dobre rozwiązanie.
źródło
Chciałbym wcześniej znaleźć rozwiązanie @ Mark, ale poszedłem i napisałem własne, zanim zobaczyłem to SO pytanie ...
Mój jest bardzo lekką wtyczką jQuery, która obsługuje stały nagłówek, stopkę, rozpinanie kolumn (colspan), zmianę rozmiaru, przewijanie w poziomie i opcjonalną liczbę wierszy do wyświetlenia przed rozpoczęciem przewijania.
jQuery.scrollTableBody (GitHub)
Dopóki masz tabelę z właściwego
<thead>
,<tbody>
oraz (opcjonalnie)<tfoot>
, wszystko co musisz zrobić, to w ten sposób:źródło
Znalazłem to obejście - przenieś wiersz nagłówka do tabeli powyżej tabeli z danymi:
źródło
Dzięki zastosowaniu wtyczki jQuery StickyTableHeaders do tabeli, nagłówki kolumn będą się przesuwać na górze okienka ekranu podczas przewijania w dół.
Przykład:
źródło
Podoba mi się odpowiedź Maximilliana Hilsa, ale miałem kilka problemów:
Aby pozbyć się migotania, używam limitu czasu, aby poczekać, aż użytkownik zakończy przewijanie, a następnie stosuję transformację - aby nagłówek nie był widoczny podczas przewijania.
Napisałem to również przy użyciu jQuery, jedną zaletą jest to, że jQuery powinno obsługiwać dla Ciebie prefiksy dostawcy
Stół jest owinięty div z klasą
table-container-fixed
.Ustawiam zwinięcie obramowania, aby je rozdzielić, ponieważ w przeciwnym razie gubimy obramowania podczas tłumaczenia i usuwam obramowanie z tabeli, aby zawartość nie pojawiła się tuż nad komórką, w której obramowanie było podczas przewijania.
Robię
th
białe tło, aby zakryć komórki pod spodem, i dodam ramkę pasującą do ramki tabeli - która jest stylizowana za pomocą Bootstrap i przewijana poza pole widzenia.źródło
Użyj najnowszej wersji jQuery i dołącz następujący kod JavaScript.
źródło
To nie jest dokładne rozwiązanie dla stałego wiersza nagłówka, ale stworzyłem dość genialną metodę powtarzania wiersza nagłówka w całej długiej tabeli, ale nadal zachowując możliwość sortowania.
Ta zgrabna mała opcja wymaga wtyczki jQuery
tablesorter
. Oto jak to działa:HTML
Oczywiście mój stół ma o wiele więcej wierszy niż ten. Dokładnie 193, ale widać, gdzie wiersz nagłówka się powtarza. Powtarzający się wiersz nagłówka jest konfigurowany przez tę funkcję:
jQuery
źródło
Wydaje się, że wiele osób szuka tej odpowiedzi. Znalazłem go w odpowiedzi na inne pytanie tutaj: Synchronizacja szerokości kolumny między tabelami w dwóch różnych ramkach itp
Spośród dziesiątek metod, które wypróbowałem, jest to jedyna metoda, którą znalazłem, która działa niezawodnie, umożliwiając przewijanie dolnej tabeli z tabelą nagłówków o takich samych szerokościach.
Oto jak to zrobiłem. Najpierw ulepszyłem powyższą wersję jsfiddle, aby utworzyć tę funkcję, która działa zarówno na (jak
td
ith
na wypadek, gdyby wywoływało to u innych, którzy używająth
stylizacji swoich wierszy nagłówka).Następnie musisz utworzyć dwie tabele, UWAGA: tabela nagłówków powinna mieć dodatkową przestrzeń,
TD
aby zostawić miejsce w górnej tabeli dla paska przewijania, jak poniżej:Następnie zrób coś takiego:
Jest to jedyne rozwiązanie, które znalazłem na stosie przepełnienia, które działa z wielu podobnych pytań, które zostały opublikowane, które działa we wszystkich moich przypadkach.
Na przykład wypróbowałem wtyczkę jQuery stickytables, która nie działa z durandal, oraz projekt Google Code tutaj https://code.google.com/p/js-scroll-table-header/issues/detail?id=2
Inne rozwiązania obejmujące klonowanie tabel, mają niską wydajność lub są do niczego i nie działają we wszystkich przypadkach.
Te zbyt złożone rozwiązania nie są potrzebne. Po prostu stwórz dwie tabele jak w poniższych przykładach i wywołaj funkcję setHeaderTableWidth jak opisano tutaj i boom, gotowe .
Jeśli to nie zadziała, prawdopodobnie grałeś ze swoją właściwością CSS i musisz ją poprawnie ustawić. Łatwo jest przypadkowo zepsuć zawartość CSS. Jest wiele rzeczy, które mogą pójść nie tak, więc bądź świadomy / ostrożny. To podejście działa dla mnie .
źródło
Oto rozwiązanie, nad którym ostatecznie pracowaliśmy (aby poradzić sobie z niektórymi przypadkami krawędziowymi i starszymi wersjami Internet Explorera, w końcu również zmniejszyliśmy pasek tytułu podczas przewijania, a następnie przywróciliśmy go po zakończeniu przewijania, ale w przeglądarkach Firefox i WebKit to rozwiązanie po prostu działa . Przyjmuje załamanie granicy: zwinięcie.
Kluczem do tego rozwiązania jest to, że po zastosowaniu border-collapse , transformacje CSS działa w nagłówku, więc jest to tylko kwestia przechwytywania zdarzeń przewijania i ustawienie przekształcić prawidłowo. Nie musisz niczego kopiować. Poza tym, że takie zachowanie jest poprawnie zaimplementowane w przeglądarce, trudno wyobrazić sobie bardziej lekkie rozwiązanie.
JSFiddle: http://jsfiddle.net/podperson/tH9VU/2/
Jest zaimplementowany jako prosta wtyczka jQuery. Po prostu sprawiasz, że twój thead jest lepki dzięki wywołaniu $ („thead”). Sticky (), a oni będą się trzymać. Działa z wieloma tabelami na stronie i nagłówkami w połowie dużych tabel.
źródło
border: 2px solid red;
doth
, przewijania i pojawi się problem. Wpadłem tym bardziej zasadowym roztworze sobie: jsfiddle.net/x6pLcor9/19Oto ulepszona odpowiedź na opublikowaną przez Maximiliana Hilsa .
Ten działa w Internet Explorerze 11 bez migotania:
źródło
Opracowałem prostą, lekką wtyczkę jQuery do konwertowania dobrze sformatowanej tabeli HTML na przewijaną tabelę ze stałym nagłówkiem i kolumnami.
Wtyczka działa dobrze, aby dopasować ustawienie piksela do piksela ustalonej sekcji z sekcją przewijalną. Ponadto można również zamrozić liczbę kolumn, które będą zawsze widoczne podczas przewijania w poziomie.
Demo i dokumentacja: http://meetselva.github.io/fixed-table-rows-cols/
Repozytorium GitHub: https://github.com/meetselva/fixed-table-rows-cols
Poniżej przedstawiono użycie prostej tabeli ze stałym nagłówkiem,
źródło
źródło
Dodatkowo do odpowiedzi @Daniel Waltrip. Tabela musi być dołączona do div
position: relative
, aby móc z nią pracowaćposition:sticky
. Więc chciałbym opublikować mój przykładowy kod tutaj.CSS
HTML
Próbny
źródło