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

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.

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.

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.

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

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.

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');

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

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

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.

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> 

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>

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!

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>