Nagłówki tabeli HTML zawsze widoczne u góry okna podczas przeglądania dużej tabeli


169

Chciałbym móc „dostosować” prezentację tabeli HTML, aby dodać jedną funkcję: podczas przewijania strony w dół, tak aby tabela była na ekranie, ale wiersze nagłówka były poza ekranem, chciałbym, aby nagłówki pozostały widoczne u góry obszaru wyświetlania.

Pod względem koncepcyjnym byłoby to podobne do funkcji „zamrażania okienek” w programie Excel. Jednak strona HTML może zawierać kilka tabel i chciałbym, aby miało to miejsce tylko w przypadku tabeli, która jest aktualnie wyświetlana, tylko wtedy, gdy jest w widoku.

Uwaga: widziałem jedno rozwiązanie, w którym obszar danych tabeli jest przewijalny, podczas gdy nagłówki się nie przewijają. To nie jest rozwiązanie, którego szukam.


czy Twoja strona została zaprojektowana przy użyciu tabel? czy nie można najpierw przekonwertować go na elementy div i pozostawić dane tabelaryczne same dla tabel?
zablokuj

6
Niedawno napisałem wtyczkę, która robi to: programowaniedrunk.com/floatThead
mkoryak

1
Oprócz rozwiązania, które uzyskało najwięcej głosów i jego pochodnych poniżej, wtyczka @mkoryak powyżej jest również całkiem dobra. Koniecznie przyjrzyj się temu również przed zakończeniem „zakupów”.
DanO

Dzięki dan :) Mam też zaplanowane kilka
niesamowitych

Popieram wtyczkę @mkoryak floatThead - udało mi się ją szybko zintegrować. Wielkie dzięki za wtyczkę!
w5m

Odpowiedzi:


67

Sprawdź jQuery.floatThead ( dostępne wersje demonstracyjne ), który jest bardzo fajny, może również współpracować z DataTables , a nawet może działać w overflow: autokontenerze.


tak, działa z przewijaniem poziomym, przewijaniem okien, przewijaniem wewnętrznym i zmianą rozmiaru okna.
mkoryak

Czy mógłbyś dodać skrzypce z działającym kodem? (Wiem, że jest w serwisie ...)
Michel Ayres

12
Zbudowałem ogromną stronę demonstracyjną / dokumentacyjną. Dlaczego potrzebujesz skrzypiec?
mkoryak

5
@MustModify stackoverflow nie jest dobrym miejscem do zadawania mi pytań. zgłoś problem na github, nawet jeśli jest to tylko pytanie, jak go uruchomić. Odpowiem tam zwykle w niecały dzień. Tutaj źle chyba odpowiem za niespełna rok :)
mkoryak

1
@MustModify, jeśli chodzi o jego wartość, żadna z klas w tabelach w przykładach nie jest odpowiednia. Wtyczka nie potrzebuje żadnych css ani klas do działania, jak mówią moi dokumentatorzy.
mkoryak

135

Stworzyłem rozwiązanie typu proof-of-concept przy użyciu jQuery .

Zobacz próbkę tutaj.

Mam teraz ten kod w repozytorium bitbucket Mercurial . Główny plik to tables.html.

Jestem świadomy jednego problemu z tym: jeśli tabela zawiera kotwice i jeśli otworzysz adres URL z określoną kotwicą w przeglądarce, po załadowaniu strony wiersz z kotwicą zostanie prawdopodobnie zasłonięty przez pływający nagłówek.

Aktualizacja 2017-12-11: Widzę, że to nie działa z obecnymi przeglądarkami Firefox (57) i Chrome (63). Nie wiem, kiedy i dlaczego to przestało działać lub jak to naprawić. Ale teraz myślę, że zaakceptowana przez Hendy Irawan odpowiedź jest lepsza.


Potrzebowałem tego do czegoś, co robię. Bardzo dziękuję. W moim nie używałem okna, ponieważ przewijane okienko było divem w html. Więc musiałem zmienić floatingHeaderRow.css("top", Math.min(scrollTop - offset.top, $(this).height() - floatingHeaderRow.height()) + "px");się floatingHeaderRow.css("top", scrollTop + "px");jak w kodzie miałeś nagłówek tabeli skakał dalej w dół strony, aby w końcu zniknąć off stronę.
Nalum,

1
Próbuję to zaimplementować w moim stole. Mam problem z szerokością nagłówka. Dane w wierszach są wartościami pobranymi z bazy danych, ponieważ mają one losową długość. Przed przewinięciem nagłówki mają rozmiar dziedziczony automatycznie, ale po przewinięciu zmienia rozmiar nagłówków, aby zawijać nazwy nagłówków, a tym samym mają znacznie mniejszą szerokość, więc nagłówki nie są w rzeczywistości śledzone nad ich odpowiednimi kolumna. Jak mogę rozwiązać ten problem?
JonYork,

Hmm, nie jestem pewien, na podstawie twojego opisu. Proponuję 1) jeśli to możliwe, pokaż przykład online; 2) zadaj to jako pytanie w StackOverflow.
Craig McQueen,

@JonYork Miałem dokładnie ten sam problem. Mój problem polegał na użyciu <td> w nagłówku zamiast <th>, więc nie mógł zastosować szerokości każdej kolumny do nieistniejącego // Copy cell widths from original headerelementu <th> (patrz część kodu). @Craig McQueen, edytuj swoją odpowiedź, aby nikt inny nie popełnił tego błędu.
aexl

@CraigMcQueen Kiedy używam twojego niesamowitego kodu (dziękuję), psuje się on na drugim stole, który mam, który znajduje się za kolejną zakładką (wtyczka jQuery). jakieś pomysły? Nagłówek zostanie umieszczony po lewej stronie, zamiast podążać za kolumnami lokalizacji. Ale działa idealnie na tabeli w pierwszej zakładce jQuery.
Richard Żak

68

Craig, dopracowałem trochę twój kod (między innymi używa on teraz position: fixed) i zapakowałem go jako wtyczkę jQuery.

Wypróbuj tutaj: http://jsfiddle.net/jmosbech/stFcx/

Uzyskaj źródło tutaj: https://github.com/jmosbech/StickyTableHeaders


1
Dobry pomysł na zrobienie wtyczki jQuery. Kilka pytań: (1) Czy działa dobrze przy przewijaniu poziomym? (2) Jak to się zachowuje, gdy przewijasz w dół, tak aby dół tabeli przewijał się poza górną część okna? Przykład nie pozwala na testowanie tych przypadków.
Craig McQueen

Twój przykład jsfiddle działa świetnie z tableorter, ale kod na github nie. Czy musiałeś zmodyfikować kod tableortera?
ericslaw

Craig, przewijanie w poziomie nie powinno stanowić problemu, ponieważ nagłówek jest ponownie ustawiany zarówno w poziomie, jak iw pionie podczas przewijania i zmiany rozmiaru. Jeśli chodzi o drugie pytanie: nagłówek jest ukryty, gdy tabela opuszcza rzutnię.
jmosbech

Eric, to dziwne. Czy próbowałeś otworzyć /demo/tablesorter.htm z Github? Nie modyfikowałem kodu tableortera, ale aby działał, musisz zastosować wtyczkę StickyTableHeader przed tableorter.
jmosbech

2
Przewijanie w poziomie nie do końca działa, po przewinięciu na dość dużą odległość, podczas przewijania poza ekran, tablica jest umieszczana bardziej w lewo niż wtedy, gdy jest normalnie umieszczona jako część stołu.
Nathan Phillips

16

Jeśli celujesz w nowoczesne przeglądarki zgodne z css3 ( obsługa przeglądarek: https://caniuse.com/#feat=css-sticky ), możesz użyć position:sticky, które nie wymaga JS i nie złamie układu tabeli. i td w tej samej kolumnie. Nie wymaga też stałej szerokości kolumny do prawidłowego działania.

Przykład dla pojedynczego wiersza nagłówka:

thead th
{
    position: sticky;
    top: 0px;
}

W przypadku łopatek z 1 lub 2 rzędami możesz użyć czegoś takiego:

thead > :last-child th
{
    position: sticky;
    top: 30px; /* This is for all the the "th" elements in the second row, (in this casa is the last child element into the thead) */
}

thead > :first-child th
{
    position: sticky;
    top: 0px; /* This is for all the the "th" elements in the first child row */
}

Być może będziesz musiał trochę pobawić się z górną właściwością ostatniego dziecka, zmieniając liczbę pikseli w celu dopasowania do wysokości pierwszego wiersza (+ margines + obramowanie + wypełnienie, jeśli istnieje), więc drugi wiersz pozostaje tylko w dół poniżej pierwszy.

Oba rozwiązania działają również, jeśli masz więcej niż jedną tabelę na tej samej stronie: thelement każdego z nich zaczyna być lepki, gdy jego górna pozycja jest wskazana w definicji css i po prostu znika, gdy cała tabela przewinie się w dół. Więc jeśli jest więcej tabel, wszystkie działają pięknie w ten sam sposób.

Dlaczego w CSS używać last-child before i first-child after ?

Ponieważ reguły css są renderowane przez przeglądarkę w tej samej kolejności, w jakiej zapisujesz je w pliku css iz tego powodu, jeśli masz tylko 1 wiersz w elemencie thead, pierwszy wiersz jest jednocześnie ostatnim wierszem i wymaga reguły pierwszego potomka zastąpienie ostatniego dziecka. Jeśli nie, będziesz miał przesunięcie wiersza o 30 pikseli od górnego marginesu, czego przypuszczam, że nie chcesz.

Znany problem z pozycją: lepka polega na tym, że nie działa ona na elementach thead lub wierszach tabeli: musisz nacelować na elementy th. Hopping ten problem zostanie rozwiązany w przyszłych wersjach przeglądarek.


Pierwszy przykład nie działa w przeglądarce Firefox (61). Jednakże, jeśli pozycja sticky jest ustawiona na thead, to robi.
ewh

1
Możesz zrobić, thead tr+tr thaby kierować na drugi wiersz.
Teepeemm

5

Możliwe alternatywy

js-floating-table-headers

js-floating-table-headers (Google Code)

W Drupalu

Mam witrynę Drupal 6. Byłem na stronie „moduły” administratora i zauważyłem, że tabele mają dokładnie tę funkcję!

Patrząc na kod, wydaje się, że jest on zaimplementowany przez plik o nazwie tableheader.js. Stosuje tę funkcję na wszystkich stołach z klasą sticky-enabled.

W przypadku witryny Drupal chciałbym móc korzystać z tego tableheader.jsmodułu w takiej postaci, w jakiej jest do treści użytkowników. tableheader.jsnie wydaje się być obecny na stronach z treścią użytkownika w Drupalu. Opublikowałem wiadomość na forum, aby zapytać, jak zmodyfikować motyw Drupala, aby był dostępny. Zgodnie z odpowiedzią, tableheader.jsmożna dodać do motywu Drupala, używając drupal_add_js()w motywie w template.phpnastępujący sposób:

drupal_add_js('misc/tableheader.js', 'core');

Twój link do Google Code był dla mnie bardzo przydatny.
Vilius Gaidelis

5

Niedawno napotkałem ten problem. Niestety musiałem zrobić 2 tabele, jedną dla nagłówka i jedną dla ciała. Prawdopodobnie nie jest to najlepsze podejście w historii, ale oto:

<html>
<head>
    <title>oh hai</title>
</head>
<body>
    <table id="tableHeader">
        <tr>
            <th style="width:100px; background-color:#CCCCCC">col header</th>
            <th style="width:100px; background-color:#CCCCCC">col header</th>
        </tr>
    </table>
    <div style="height:50px; overflow:auto; width:250px">
        <table>
            <tr>
                <td style="height:50px; width:100px; background-color:#DDDDDD">data1</td>
                <td style="height:50px; width:100px; background-color:#DDDDDD">data1</td>
            </tr>
            <tr>
                <td style="height:50px; width:100px; background-color:#DDDDDD">data2</td>
                <td style="height:50px; width:100px; background-color:#DDDDDD">data2</td>
            </tr>
        </table>
    </div>
</body>
</html>

To zadziałało dla mnie, prawdopodobnie nie jest to elegancki sposób, ale działa. Zbadam, czy mogę zrobić coś lepszego, ale pozwala to na wiele tabel.

Przeczytaj o właściwościach przepełnienia, aby sprawdzić, czy pasuje do twoich potrzeb


Hmm nie działa, spróbuję to naprawić, ale podejście pozostaje, musisz użyć przepełnienia: auto proprety
Gab Royer

Doceniam twoje rozwiązanie i jego prostotę, jednak w moim pytaniu powiedziałem: „Uwaga: widziałem jedno rozwiązanie, w którym obszar danych tabeli jest przewijany, podczas gdy nagłówki nie są przewijane. To nie jest rozwiązanie, którego szukam”.
Craig McQueen

@GabRoyer Strona w3school, o której wspomniałeś, nie istnieje.
Farhan

Wydaje się, że to przenieśli. Naprawiono
Gab Royer,

Innym problemem związanym z tym podejściem jest to, że jeśli musisz dostosować niektóre kolumny do innej zawartości, ryzykujesz zerwanie ich wyrównania z odpowiednim nagłówkiem kolumny. IMHO lepiej jest zmierzyć się z tym problemem, stosując podejście, które pozwala na pewnego rodzaju dynamiczne zarządzanie treścią, przy zachowaniu idealnego wyrównania kolumn i względnych nagłówków. Więc pozycja IMHO = lepka jest do zrobienia.
willy wonka

3

To naprawdę trudne, aby mieć lepki nagłówek na stole. Miałem te same wymagania, ale z asp: GridView, a potem stwierdziłem, że naprawdę pomyślałem, że ma lepki nagłówek w widoku siatki. Dostępnych jest wiele rozwiązań i wypróbowanie wszystkich zajęło mi 3 dni, ale żadne z nich nie było satysfakcjonujące.

Głównym problemem, z którym miałem do czynienia w przypadku większości tych rozwiązań, był problem z wyrównaniem. Kiedy próbujesz sprawić, by nagłówek był pływający, w jakiś sposób wyrównanie komórek nagłówka i komórek treści znika z właściwej ścieżki.

W przypadku niektórych rozwiązań pojawił się również problem z nakładaniem się nagłówka na kilka pierwszych rzędów treści, co powoduje, że wiersze treści są ukrywane za pływającym nagłówkiem.

Więc teraz musiałem zaimplementować własną logikę, aby to osiągnąć, chociaż też nie uważam tego za idealne rozwiązanie, ale może to też być pomocne dla kogoś,

Poniżej znajduje się przykładowa tabela.

<div class="table-holder">
        <table id="MyTable" cellpadding="4" cellspacing="0" border="1px" class="customerTable">
            <thead>
                <tr><th>ID</th><th>First Name</th><th>Last Name</th><th>DOB</th><th>Place</th></tr>
            </thead>
            <tbody>
                <tr><td>1</td><td>Customer1</td><td>LastName</td><td>1-1-1</td><td>SUN</td></tr>
                <tr><td>2</td><td>Customer2</td><td>LastName</td><td>2-2-2</td><td>Earth</td></tr>
                <tr><td>3</td><td>Customer3</td><td>LastName</td><td>3-3-3</td><td>Mars</td></tr>
                <tr><td>4</td><td>Customer4</td><td>LastName</td><td>4-4-4</td><td>Venus</td></tr>
                <tr><td>5</td><td>Customer5</td><td>LastName</td><td>5-5-5</td><td>Saturn</td></tr>
                <tr><td>6</td><td>Customer6</td><td>LastName</td><td>6-6-6</td><td>Jupitor</td></tr>
                <tr><td>7</td><td>Customer7</td><td>LastName</td><td>7-7-7</td><td>Mercury</td></tr>
                <tr><td>8</td><td>Customer8</td><td>LastName</td><td>8-8-8</td><td>Moon</td></tr>
                <tr><td>9</td><td>Customer9</td><td>LastName</td><td>9-9-9</td><td>Uranus</td></tr>
                <tr><td>10</td><td>Customer10</td><td>LastName</td><td>10-10-10</td><td>Neptune</td></tr>
            </tbody>
        </table>
    </div>

Uwaga : Tabela jest opakowana w DIV z atrybutem klasy równym „table-holder”.

Poniżej znajduje się skrypt JQuery, który dodałem w nagłówku mojej strony html.

<script src="../Scripts/jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="../Scripts/jquery-ui.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function () {
        //create var for table holder
        var originalTableHolder = $(".table-holder");
        // set the table holder's with
        originalTableHolder.width($('table', originalTableHolder).width() + 17);
        // Create a clone of table holder DIV
        var clonedtableHolder = originalTableHolder.clone();

        // Calculate height of all header rows.
        var headerHeight = 0;
        $('thead', originalTableHolder).each(function (index, element) {
            headerHeight = headerHeight + $(element).height();
        });

        // Set the position of cloned table so that cloned table overlapped the original
        clonedtableHolder.css('position', 'relative');
        clonedtableHolder.css('top', headerHeight + 'px');

        // Set the height of cloned header equal to header height only so that body is not visible of cloned header
        clonedtableHolder.height(headerHeight);
        clonedtableHolder.css('overflow', 'hidden');

        // reset the ID attribute of each element in cloned table
        $('*', clonedtableHolder).each(function (index, element) {
            if ($(element).attr('id')) {
                $(element).attr('id', $(element).attr('id') + '_Cloned');
            }
        });

        originalTableHolder.css('border-bottom', '1px solid #aaa');

        // Place the cloned table holder before original one
        originalTableHolder.before(clonedtableHolder);
    });
</script>

i na koniec poniżej jest klasa CSS do trochę kolorowania.

.table-holder
{
    height:200px;
    overflow:auto;
    border-width:0px;    
}

.customerTable thead
{
    background: #4b6c9e;        
    color:White;
}

Więc cała idea tej logiki polega na umieszczeniu tabeli w div tabeli i utworzeniu klonu tego uchwytu po stronie klienta po załadowaniu strony. Teraz ukryj korpus tabeli w uchwycie klonu i umieść pozostałą część nagłówka nad oryginalnym nagłówkiem.

To samo rozwiązanie działa również dla asp: gridview, musisz dodać jeszcze dwa kroki, aby to osiągnąć w widoku siatki,

  1. W zdarzeniu OnPrerender obiektu gridview na Twojej stronie internetowej ustaw sekcję tabeli w wierszu nagłówka na wartość TableHeader.

    if (this.HeaderRow != null)
    {
        this.HeaderRow.TableSection = TableRowSection.TableHeader;
    }
  2. I zawiń swoją siatkę w <div class="table-holder"></div>.

Uwaga : jeśli twój nagłówek ma klikalne elementy sterujące, może być konieczne dodanie więcej skryptu jQuery, aby przekazać zdarzenia wywołane w sklonowanym nagłówku do oryginalnego nagłówka. Ten kod jest już dostępny we wtyczce jQuery sticky-header stworzonej przez jmosbech


+1 za dobry wysiłek, ale w przypadku dużych tabel z dużą ilością danych sklonowanie całości jest bardzo złe ... Wyobrażam sobie, że
podwoiłoby to

2

Korzystanie display: fixedz theadsekcji powinno działać, ale aby działać tylko na bieżącej tabeli, będziesz potrzebować pomocy JavaScript. I będzie to trudne, ponieważ będzie musiał znaleźć przewijane miejsca i położenie elementów względem widoku, który jest jednym z głównych obszarów niezgodności przeglądarek.

Spójrz na popularne frameworki JavaScript (jQuery, MooTools, YUI itp.), Aby sprawdzić, czy mogą albo robić to, co chcesz, albo ułatwić robienie tego, co chcesz.


1
Dzięki za radę. Zrobiłem rozwiązanie za pomocą jQuery - zobacz moją odpowiedź.
Craig McQueen,

Próbowałem tego i myślę, że miałeś na myśli raczej pozycję niż wyświetlanie, ale żaden z nich nie pracował dla thead in chome.
ericslaw

@ericslaw Ack - tak, miałem na myśli position: fixed. Przepraszamy, to nie działa w Chrome.
staticsan

zepsułem mój nagłówek, ignorując style szerokości
pavel_kazlou

2

Jeśli używasz tabeli pełnoekranowej, być może jesteś zainteresowany ustawieniem wyświetlania th: fixed; i góra: 0; lub wypróbuj bardzo podobne podejście poprzez css.

Aktualizacja

Po prostu szybko utwórz działające rozwiązanie za pomocą ramek iframe (html4.0). Ten przykład NIE JEST zgodny ze standardem, jednak z łatwością będziesz w stanie to naprawić:

external.html

<?xml version='1.0' encoding='UTF-8'?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">   
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">     
    <head>      
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />   
        <title>Outer</title>
  <body>
    <iframe src="test.html" width="200" height="100"></iframe>
    </body>
</html> 

test.html

<?xml version='1.0' encoding='UTF-8'?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">   
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">     
    <head>      
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />   
        <title>Floating</title>
    <style type="text/css">
      .content{
        position:relative; 
      }

      thead{
        background-color:red;
        position:fixed; 
        top:0;
      }
    </style>
  <body>
    <div class="content">      
      <table>
        <thead>
          <tr class="top"><td>Title</td></tr>
        </head>
        <tbody>
          <tr><td>a</td></tr>
          <tr><td>b</td></tr>
          <tr><td>c</td></tr>
          <tr><td>d</td></tr>
          <tr><td>e</td></tr>
          <tr><td>e</td></tr>
          <tr><td>e</td></tr>
          <tr><td>e</td></tr>
          <tr><td>e</td></tr>
          <tr><td>e</td></tr>
        </tbody>
      </table>
    </div>
    </body>
</html> 

@ a_m0d, prawda ... ale żądanie brzmi bardzo myląco. Albo tego nie rozumiemy, albo pytający nie do końca rozumie, czego chce.
Sampson

Oto inne rozwiązanie wykorzystujące javascript imaputz.com/cssStuff/bigFourVersion.html
merkuro

2

Najprostsza odpowiedź tylko przy użyciu CSS: D !!!

table {
  /* Not required only for visualizing */
  border-collapse: collapse;
  width: 100%;
}

table thead tr th {
  /* you could also change td instead th depending your html code */
  background-color: green;
  position: sticky;
  z-index: 100;
  top: 0;
}

td {
  /* Not required only for visualizing */
  padding: 1em;
}
<table>
  <thead>
    <tr>
      <th>Col1</th>
      <th>Col2</th>
      <th>Col3</th>
    </tr>
  </thead>
  <tbody>
     <tr>
       <td>data</td>
       <td>data</td>
       <td>data</td>
     </tr>
     <tr>
       <td>data</td>
       <td>data</td>
       <td>data</td>
     </tr>
     <tr>
       <td>data</td>
       <td>data</td>
       <td>data</td>
     </tr>
     <tr>
       <td>data</td>
       <td>data</td>
       <td>data</td>
     </tr>
     <tr>
       <td>data</td>
       <td>data</td>
       <td>data</td>
     </tr>
     <tr>
       <td>data</td>
       <td>data</td>
       <td>data</td>
     </tr>
     <tr>
       <td>data</td>
       <td>data</td>
       <td>data</td>
     </tr>
     <tr>
       <td>data</td>
       <td>data</td>
       <td>data</td>
     </tr>
     <tr>
       <td>data</td>
       <td>data</td>
       <td>data</td>
     </tr>
     <tr>
       <td>data</td>
       <td>data</td>
       <td>data</td>
     </tr>
     <tr>
       <td>data</td>
       <td>data</td>
       <td>data</td>
     </tr>
     <tr>
       <td>data</td>
       <td>data</td>
       <td>data</td>
     </tr>
     <tr>
       <td>data</td>
       <td>data</td>
       <td>data</td>
     </tr>
     <tr>
       <td>data</td>
       <td>data</td>
       <td>data</td>
     </tr>
     <tr>
       <td>david</td>
       <td>castro</td>
       <td>rocks!</td>
     </tr>
  </tbody>
</table>


1
Dzięki David, to najmilsze podejście, jakie znalazłem w tym pytaniu
Tomasz Smykowski

0

Ten dowód słuszności koncepcji był świetny! Jednak znalazłem również tę wtyczkę jQuery, która wydaje się działać bardzo dobrze. Mam nadzieję, że to pomoże!


Wygląda na to, że implementuje inną funkcję . Jak powiedziałem w moim pierwotnym pytaniu: „Uwaga: widziałem jedno rozwiązanie, w którym obszar danych tabeli jest przewijalny, podczas gdy nagłówki nie są przewijane. Nie jest to rozwiązanie, którego szukam”.
Craig McQueen

2
wypróbowanie wtyczki, o której wspomniałeś, zepsuło mój nagłówek tabeli. Nie był w stanie tego użyć.
pavel_kazlou

0

To frustrujące, że to, co działa świetnie w jednej przeglądarce, nie działa w innych. Poniższe działa w przeglądarce Firefox, ale nie w Chrome ani IE:

<table width="80%">

 <thead>

 <tr>
  <th>Column 1</th>
  <th>Column 2</th>
  <th>Column 3</th>
 </tr>

 </thead>

 <tbody style="height:50px; overflow:auto">

  <tr>
    <td>Cell A1</td>
    <td>Cell B1</td>
    <td>Cell C1</td>
  </tr>

  <tr>
    <td>Cell A2</td>
    <td>Cell B2</td>
    <td>Cell C2</td>
  </tr>

  <tr>
    <td>Cell A3</td>
    <td>Cell B3</td>
    <td>Cell C3</td>
  </tr>

 </tbody>

</table>

4
Próbuję tego w przeglądarce Firefox 8.0 i wydaje się, że nic nie daje. Co to robi?
Craig McQueen,

Co to jest px? Czy to ta starsza jednostka używana przez ludzi w 90. wieku, kiedy używano wyświetlacza o rozdzielczości 72 dpi?
ceving

Zgadzam się: to bardzo frustrujące, niestety twórcy przeglądarek nie przestrzegają standardów w każdej sytuacji ... a kilka lat temu było jeszcze gorzej! Teraz niektóre problemy zostały rozwiązane i więcej przeglądarek zachowuje się w bardziej ustandaryzowany sposób, ale jeszcze wiele kroków do zrobienia: miejmy nadzieję i módlmy się :-)
willy wonka
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.