Jak mogę pozwolić, aby korpus stołu przewijał się, ale jego głowa była nieruchoma?

148

Piszę stronę, na której potrzebuję tabeli HTML, aby zachować ustalony rozmiar. Potrzebuję, aby nagłówki na górze tabeli pozostały tam przez cały czas, ale potrzebuję również, aby treść tabeli była przewijana niezależnie od liczby wierszy dodanych do tabeli. Pomyśl o mini wersji programu Excel. Wydaje się, że jest to proste zadanie, ale prawie każde rozwiązanie, które znalazłem w sieci, ma pewne wady. Jak mogę to rozwiązać?

javascript html css html-table miętowy
źródło
2
istnieje wiele przykładów. ten jest jednym z nich .
Darren Kopp
Muszę kierować reklamy na IE6, IE7, FF, ... ale niestety szczególnie IE
minty
Jest tam wiele hacków CSS. Rozpoczęcie pracy w IE7 powinno być trywialne.
Jim
4
Interesuje mnie odpowiedź dla wszystkich przeglądarek!
miętowy
15
„Rozpoczęcie pracy w IE7 powinno być trywialne”. Jim, czy to ty? Czy jesteś moim kierownikiem projektu? :)
Aaronius

Odpowiedzi:

53

Musiałem znaleźć tę samą odpowiedź. Najlepszy przykład, jaki znalazłem, to http://www.cssplay.co.uk/menu/tablescroll.html - zauważyłem, że przykład nr 2 dobrze mi pasuje. Będziesz musiał ustawić wysokość wewnętrznej tabeli za pomocą Java Script, reszta to CSS.

Ken Penn
źródło
3
niestety ta metoda zawodzi, gdy masz szeroki stół (przewijanie w poziomie). Będziesz mieć dwa poziome paski przewijania; jeden dla nagłówka i jeden dla danych.
vol7ron
4
Twoje rozwiązanie nie działa, jeśli nie określisz <th> szerokości wewnątrz <thead>
Alexandru R
2
Aby zachować zgodność z (względnie) nowymi standardami przepełnienia stosu, czy możesz edytować tę odpowiedź, aby uwzględnić odpowiednie bity z łącza?
Sfinansuj pozew Moniki
Gdzie jest źródło, Billy?
blask świec
Niemożliwe jest zsynchronizowanie szerokości kolumn między nagłówkiem a (przewijalną) treścią tabeli bez uciekania się do JavaScript lub wstępnie zdefiniowanych wartości.
rustyx
34

Zauważyłem, że DataTables jest dość elastyczny. Chociaż jego domyślna wersja jest oparta na jquery, istnieje również wtyczka AngularJs .

Vitalii Fedorenko
źródło
bardzo sprytny - większość funkcjonalności działa na moim S3, Androidzie 4.0.4, ale nie na wyszukiwaniu / filtrze
Jens Frandsen
12

Widziałem doskonałe rozwiązanie podobnego pytania Seana Haddy'ego i pozwoliłem sobie na wprowadzenie kilku poprawek :

  • Użyj klas zamiast identyfikatora, aby jeden skrypt jQuery mógł zostać ponownie użyty dla wielu tabel na jednej stronie
  • Dodano obsługę semantycznych elementów tabeli HTML, takich jak caption, thead, tfoot i tbody
  • Ustawiono pasek przewijania jako opcjonalny, więc nie będzie się pojawiał w przypadku tabel, które są „krótsze” niż przewijana wysokość
  • Dostosowano szerokość przewijanego elementu div, aby pasek przewijania znajdował się przy prawej krawędzi tabeli
  • Koncepcja udostępniona przez
    • using aria-hidden = "true" na wstrzykniętym statycznym nagłówku tabeli
    • i pozostawiając oryginalną płytę na miejscu, po prostu ukrytą za pomocą jQuery i ustawioną aria-hidden="false"
  • Pokazano przykłady wielu tabel o różnych rozmiarach

Sean wykonał jednak ciężkie podnoszenie. Dziękuję również Mattowi Burlandowi za wskazanie konieczności wsparcia stopy.

Przekonaj się sam na http://jsfiddle.net/jhfrench/eNP2N/

Jeromy French
źródło
Dobrze, ale spieprzy, jeśli chcesz nagłówek i stopkę!
Matt Burland,
3
Dzięki Matt, dokonałem korekty.
Jeromy francuski
Wyrównanie wymaga poprawek, jeśli pokazujesz granice td i th.
dhochee
8

Czy próbowałeś użyć thead i tbody i ustawić stałą wysokość na tbody z overflow: scroll?

Jakie są Twoje docelowe przeglądarki?

EDYCJA: Działało dobrze (prawie) w Firefoksie - dodanie pionowego paska przewijania spowodowało również potrzebę poziomego paska przewijania - fuj. IE po prostu ustawił wysokość każdego td na taką, jaką określiłem jako wysokość ciała. Oto najlepsze, co mogłem wymyślić:

<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>
Chris Marasti-Georg
źródło
1
Muszę kierować reklamy na IE6, IE7, FF, ... ale niestety szczególnie IE
minty
Zmień tabelę tak, aby miała mniej niż 100% szerokości, powiedzmy 99% i powinna załatwić problem
WolfmanDragon
2
overflow-x: hidden;a overflow-y: autotakże pomóc.
justkt
7
To działało kiedyś w przeglądarce Firefox i jest to oczywisty i niezgrabny kod. Jednak w nowszych wersjach przeglądarki Firefox jest uszkodzony.
Rasmus Kaj
6
To nie działa, ponieważ „przepełnienie” ma zastosowanie tylko do „kontenerów blokowych” ( w3.org/TR/CSS21/visufx.html#overflow ), a pola tabel nie są „kontenerami blokowymi” ( w3.org/TR/CSS21/ visuren.html # pola blokowe ).
mhsmith
8

Potrzebujesz:

1) mają treść tabeli o ograniczonej wysokości, ponieważ przewijanie ma miejsce tylko wtedy, gdy zawartość jest większa niż przewijane okno. Nie tbodymożna jednak dopasować rozmiaru i musisz to wyświetlić jako block:

tbody {
   overflow-y: auto;
   display: block;
   max-height: 10em;    // For example
}

2) Ponownie zsynchronizuj nagłówki tabeli i szerokości kolumn z treścią tabeli, tak aby ta ostatnia blockuczyniła z niej element niepowiązany. Jedynym sposobem, aby to zrobić, jest zasymulowanie synchronizacji przez wymuszenie tej samej szerokości kolumn w obu .

Jednak ponieważ tbodysam jest blockteraz, nie może już zachowywać się jak table. Ponieważ nadal potrzebujesz tablezachowania, aby poprawnie wyświetlać kolumny, rozwiązaniem jest poproszenie, aby każdy z wierszy był wyświetlany jako osobne tablepozycje:

thead {         
   display: table;  
   width: 100%;     // Fill the containing table
}
tbody tr {
   display: table;
   width: 100%;     // Fill the containing table
}

(Zauważ, że używając tej techniki, nie będziesz już w stanie rozciągać się między wierszami).

Gdy to zrobisz, możesz wymusić szerokość kolumn, aby mieć tę samą szerokość w obu theadi tbody. Nie możesz tego:

  • indywidualnie dla każdej kolumny (poprzez określone klasy CSS lub wbudowane style), co jest dość uciążliwe dla każdej instancji tabeli;
  • jednolicie dla wszystkich kolumn (do th, td { width: 20%; } na przykład jeśli masz 5 kolumn), co jest bardziej praktyczne (nie ma potrzeby ustawiania szerokości dla każdej instancji tabeli), ale nie może działać dla żadnej liczby kolumn
  • jednolicie dla dowolnej liczby kolumn, poprzez stały układ tabeli.

Wolę ostatnią opcję, która wymaga dodania:

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
}

Zobacz demo tutaj , rozwidlone z odpowiedzi na to pytanie .

Javarome
źródło
Dziękuję za wyjaśnienie. Zaskakujące jest to, na ile sposobów można coś takiego zrobić, a większość odpowiedzi przedstawia po prostu kod i łącze plunkr, pozostawiając ci samodzielne zrozumienie.
Paul Rooney
4

Edycja:   To bardzo stara odpowiedź i jest tu dla dobrobytu, aby pokazać, że była obsługiwana w 2000 roku, ale została usunięta, ponieważ strategia przeglądarek w 2010 roku była zgodna ze specyfikacjami W3C, nawet jeśli niektóre funkcje zostały usunięte: Przewijalna tabela ze stałym nagłówkiem / footer został niezdarnie określony przed HTML5.

Złe wieści

Niestety nie ma eleganckiego sposobu obsługi przewijalnej tabeli ze stałym thead/, tfoot ponieważ specyfikacje HTML / CSS nie są zbyt jasne na temat tej funkcji .

Wyjaśnienia

Chociaż specyfikacja HTML 4.01 mówi, że thead/ tfoot/ tbodysą używane (wprowadzane?) Do przewijania treści tabeli:

Wiersze tabeli można grupować [...] za pomocą elementów THEAD, TFOOT i TBODY [...]. Ten podział umożliwia programom użytkownika obsługę przewijania treści tabeli niezależnie od nagłówka i stopy tabeli.

Ale działająca funkcja przewijalnej tabeli w FF 3.6 została usunięta w FF 3.7, ponieważ jest uważana za błąd, ponieważ nie jest zgodna ze specyfikacjami HTML / CSS. Zobacz to i tamto komentarze dotyczące błędów FF.

Wskazówka Mozilla Developer Network

Poniżej znajduje się uproszczona wersja przydatnych wskazówek MDN dotyczących przewijanej tabeli.
Zobacz tę zarchiwizowaną stronę lub aktualną wersję francuską

<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>

Jednak MDN mówi również, że to już nie działa na FF :-(
Testowałem również na IE8 => tabela również nie jest przewijalna: - ((

olibre
źródło
Wskazówki MDN dotyczące przewijalnego łącza tabeli nie są istotną informacją, która mówi o zawinięciu obramowania. Może strona się zmieniła, ponieważ minęło 5 lat
partizanos
Dzięki @partizanos Wreszcie znalazłem oryginalną stronę wiki w historii MDN! Moja stara odpowiedź wydaje się teraz przestarzała, ale dla dobrobytu następne pokolenie programistów będzie wiedziało, że było to możliwe i łatwe do wdrożenia w 2000 roku ;-) Pozdrawiam
olibre
3

Nie jestem pewien, czy ktokolwiek nadal się temu przygląda, ale sposób, w jaki zrobiłem to wcześniej, polega na użyciu dwóch tabel do wyświetlenia jednej oryginalnej tabeli - pierwsza to tylko oryginalna linia tytułu tabeli i bez wierszy treści tabeli (lub pusty wiersz treści do utworzenia sprawdza).

Drugi znajduje się w osobnym div i nie ma tytułu, a tylko oryginalne wiersze treści tabeli. Oddzielny element div jest następnie przewijalny.

Druga tabela w swoim div jest umieszczona tuż pod pierwszą tabelą w kodzie HTML i wygląda jak pojedyncza tabela ze stałym nagłówkiem i przewijalną dolną sekcją. Testowałem to tylko w Safari, Firefoxie i IE (najnowsze wersje każdego z nich wiosną 2010), ale zadziałało we wszystkich.

Jedynym problemem, jaki miał, było to, że pierwsza tabela nie mogła zostać zweryfikowana bez treści (walidator W3.org - XHTML 1.0 ścisły), a kiedy dodałem jedną bez treści, powoduje to pusty wiersz. Możesz użyć CSS, aby nie było to widoczne, ale nadal zajmuje to miejsce na stronie.

Mick
źródło
W jaki sposób dodatkowy rząd nadal zajmowałby miejsce? Jeśli używasz display: none;, nie musi zajmować miejsca na ekranie , chyba że masz na myśli miejsce w źródle ..?
ClarkeyBoy
3

To rozwiązanie działa w Chrome 35, Firefox 30 i IE 11 (nie testowano innych wersji)

Czysty CSS: http://jsfiddle.net/ffabreti/d4sope1u/

Wszystko jest ustawione do wyświetlenia: blok, stół wymaga wysokości:

    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;
    }
Fernando Fabreti
źródło
2

Przyprawiało mnie to o ogromne bóle głowy, gdy próbowałem wdrożyć taką siatkę w naszej aplikacji. Wypróbowałem wszystkie dostępne techniki, ale każda z nich miała problemy. Najbliżej mnie było użycie wtyczki jQuery, takiej jak Flexigrid (spójrz na http://www.ajaxrain.com alternatyw ), ale wydaje się, że nie obsługuje stuprocentowo szerokich tabel, czego potrzebowałem.

Skończyło się na tym, że skręciłem własne; Firefox obsługuje tbodyelementy przewijane , więc przeglądałem i użyłem odpowiedniego CSS (ustawienie wysokości, przepełnienia itp ... zapytaj, czy chcesz więcej szczegółów), aby przewijać, a następnie dla innych przeglądarek użyłem dwóch oddzielnych tabel do użycia, table-layout: fixedktóre używają rozmiaru algorytm, który gwarantuje, że nie przekroczy podanego rozmiaru (normalne tabele rozszerzają się, gdy zawartość jest zbyt szeroka, aby pasowała). Dając obu tabelom identyczne szerokości, udało mi się wyrównać ich kolumny. Zawijałem drugi w zestawie div do przewijania i dzięki odrobinie jiggery z marginesami itp. Udało mi się uzyskać wygląd i styl, który chciałem.

Przepraszamy, jeśli ta odpowiedź brzmi trochę niejasno w niektórych miejscach; Piszę szybko, bo nie mam dużo czasu. Zostaw komentarz, jeśli chcesz, żebym dalej się rozwijał!

Luke Bennett
źródło
Przepraszam, że wskrzesiłem ten stary wątek, ale naprawdę muszę wiedzieć, jak to rozwiązałeś. Mam działający FF, ale nie przeglądarki IE / WebKit. Proszę o pomoc, kiedy możesz.
Alfero Chingono
2

Oto kod, który naprawdę działa dla IE i FF (przynajmniej):

<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>user@user.com</td>
                    <td>1</td>
                    <td>Y</td>
                </tr>
                <tr class="alt">
                    <td>user 2</td>
                    <td>user@user.com</td>
                    <td>2</td>
                    <td>N</td>
                </tr>
                <tr>
                    <td>user 3</td>
                    <td>user@user.com</td>
                    <td>3</td>
                    <td>Y</td>
                </tr>
                <tr class="alt">
                    <td>user 4</td>
                    <td>user@user.com</td>
                    <td>4</td>
                    <td>N</td>
                </tr>
                <tr>
                    <td>user 5</td>
                    <td>user@user.com</td>
                    <td>5</td>
                    <td>Y</td>
                </tr>
                <tr class="alt">
                    <td>user 6</td>
                    <td>user@user.com</td>
                    <td>6</td>
                    <td>N</td>
                </tr>
                <tr>
                    <td>user 7</td>
                    <td>user@user.com</td>
                    <td>7</td>
                    <td>Y</td>
                </tr>
                <tr class="alt">
                    <td>user 8</td>
                    <td>user@user.com</td>
                    <td>8</td>
                    <td>N</td>
                </tr>
            </tbody>
        </table>
    </div>
</body></html>

Zmieniłem oryginalny kod, aby był bardziej przejrzysty, a także, aby działał dobrze w IE i FF ..

Oryginalny kod TUTAJ

Daniel Costa
źródło
1
W IE7 / 8 działa to tylko w trybie dziwactw i przestaje działać, gdy tylko dodasz <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
typ dokumentu
1

Oto moja alternatywa. Używa również różnych DIV dla nagłówka, treści i stopki, ale jest zsynchronizowany do zmiany rozmiaru okna oraz z wyszukiwaniem, przewijaniem, sortowaniem, filtrowaniem i pozycjonowaniem:

Moje listy CD

Kliknij przycisk Jazz, Classical ..., aby zobaczyć tabele. Jest skonfigurowany tak, że jest odpowiedni, nawet jeśli JavaScript jest wyłączony.

Wydaje się OK w IE, FF i WebKit (Chrome, Safari).

zniknął
źródło
1

Przepraszam, nie przeczytałem wszystkich odpowiedzi na twoje pytanie.

Tak, oto rzecz, której chcesz (już zrobiłem)

Możesz użyć dwóch tabel o tej samej nazwie klasy do podobnego stylu, jednej tylko z nagłówkiem tabeli, a drugiej z wierszami. Teraz umieść tę tabelę wewnątrz div o stałej wysokości z overflow-y: auto OR scroll.

Sanuj
źródło
1

Główny problem, jaki miałem z powyższymi sugestiami, polegał na tym, że mogłem podłączyć tableorter.js ORAZ móc przesuwać nagłówki tabeli ograniczonej do określonego maksymalnego rozmiaru. W końcu natknąłem się na wtyczkę jQuery.floatThead, która zapewniała pływające nagłówki i pozwalała sortować dalej.

Ma również ładną stronę porównawczą pokazującą siebie w porównaniu z podobnymi wtyczkami .

Guy Hollington
źródło
1

Live JsFiddle

Jest to możliwe tylko z HTML i CSS

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>
Rozwiń fragment

Md. Rafee
źródło
0

Jeśli możesz użyć JavaScript tutaj, to moje rozwiązanie Utwórz tabelę o stałej szerokości we wszystkich kolumnach (pikselach!), Dodaj klasę Scrollify do tabeli i dodaj tę wysokość javascript + jquery 1.4.x w css lub style!

Testowano w: Opera, Chrome, Safari, FF, IE5.5 (błąd Epic script ), 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);
}

Edycja: stała wysokość.

Piotr
źródło
0

Robię to za pomocą javascript (brak biblioteki) i CSS - treść tabeli przewija się wraz ze stroną, a tabela nie musi mieć stałej szerokości ani wysokości, chociaż każda kolumna musi mieć szerokość. Możesz także zachować funkcjonalność sortowania.

Gruntownie:

  1. W HTML utwórz elementy div kontenera, aby ustawić wiersz nagłówka tabeli i treść tabeli, a także utwórz element div „maska”, aby ukryć treść tabeli, gdy przewija się ona poza nagłówek

  2. W CSS przekonwertuj części tabeli na bloki

  3. W Javascript pobierz szerokość tabeli i dopasuj szerokość maski ... pobierz wysokość zawartości strony ... zmierz pozycję przewijania ... zmień CSS, aby ustawić pozycję wiersza nagłówka tabeli i wysokość maski

Oto javascript i DEMO jsFiddle.

// 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();
}
Deborah
źródło
Ale w twoim demo nagłówek tabeli nie pozostaje na miejscu, po prostu jest przewijany. (Tu Chrome)
Sz.
Nie widzę tego w Chrome. Czy na pewno nie mylisz podświetlonych na żółto komórek z czerwonymi instrukcjami w nagłówku? Komórki nagłówka znajdują się u góry i są szare na szarym tle („Kol 1”, „Kol 2” itd.).
Deborah
0

Dla mnie nic związanego z przewijaniem naprawdę nie działało, dopóki nie usunąłem szerokości z tabeli CSS. Pierwotnie tabela CSS wyglądała następująco:

.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;
}

Jak tylko usunąłem szerokość: 100%; wszystkie funkcje przewijania zaczęły działać.

Matthew Park
źródło
0

Jeśli masz wystarczająco niskie standardy;), możesz umieścić tabelę, która zawiera tylko nagłówek bezpośrednio nad tabelą, która ma tylko treść. Nie będzie się przewijać w poziomie, ale jeśli tego nie potrzebujesz ...

M610
źródło