Wie kann ich den Körper eines Tisches rollen lassen, aber den Kopf festhalten?

Schreibe ich eine Seite, wo ich eine HTML-Tabelle zu erhalten, eine festgelegte Größe. Ich brauche die Header an der Spitze der Tabelle zu bleiben, zu allen Zeiten, aber ich brauche auch den Körper der Tabelle zu scrollen, egal wie viele Zeilen in der Tabelle Hinzugefügt werden. Denke, eine mini-version von excel. Dies scheint wie eine einfache Aufgabe, aber fast jede Lösung, die ich gefunden habe im web hat einen Nachteil. Wie kann ich dieses Problem lösen?

Kommentar zu dem Problem

es gibt viele Beispiele gibt. dies ist einer von Ihnen. Kommentarautor: Darren Kopp

Ich brauche zum Ziel IE6, IE7, FF, ... aber vor allem IE leider Kommentarautor: minty

Funktioniert nicht im IE7 Kommentarautor: Chris Marasti-Georg

Ich bin daran interessiert, die Antwort für alle Browser! Kommentarautor: minty

"Es sollte trivial zu bekommen, funktioniert in IE7." Jim, bist du das? Sind Sie mein Projekt manager? 🙂 Kommentarautor: Aaronius

InformationsquelleAutor der Frage minty | 2008-09-24

53

Musste ich feststellen die gleiche Antwort. Das beste Beispiel fand ich http://www.cssplay.co.uk/menu/tablescroll.html - ich fand Beispiel #2 die gut für mich gearbeitet. Sie haben, um die Größe der inneren Tabelle mit Java-Script, der rest ist CSS.

InformationsquelleAutor der Antwort Ken Penn
34

Fand ich DataTables variabel zu sein. Während seiner Standard-version basiert auf jquery, da ist auch ein AngularJs-plugin.

InformationsquelleAutor der Antwort Vitalii Fedorenko
12

Sah ich Sean Haddy ' s hervorragende Lösung, um eine ähnliche Frage und hat die Freiheit des machen einige änderungen:
- Verwenden Sie Klassen anstelle von ID, also ein jQuery-Skript kann wiederverwendet werden
  mehrere Tabellen auf einer Seite
- Unterstützung für semantische HTML-table-Elemente wie caption, thead, tfoot, und tbody
- Gemacht scrollbar-optional, damit es nicht angezeigt, für die Tabellen, die sind "kürzer" als der scrollbare Höhe
- Angepasst scrollen von div-Breite zu bringen, wird die Bildlaufleiste am rechten Rand der Tabelle
- Konzept zugänglich
  - mit aria-hidden="true" auf injizierten statische Tabelle header
  - und verlassen ursprünglichen thead vorhanden, nur ausgeblendet mit jQuery und setzen aria-hidden="false"
- Zeigte Beispiele von mehreren Tabellen mit unterschiedlichen Größen
Sean Tat das heben schwerer, obwohl. Dank Matt Burland, auch für den Hinweis auf Notwendigkeit der Unterstützung tfoot.

Bitte überzeugen Sie sich bei http://jsfiddle.net/jhfrench/eNP2N/

InformationsquelleAutor der Antwort Jeromy French

Haben Sie versucht, mit thead und tbody, und einer festen Höhe auf den tbody mit overflow:scroll?

Was sind Ihre Ziel-Browser?

EDIT: Es klappte auch (fast) im firefox - die neben der vertikalen Bildlaufleiste verursacht die Notwendigkeit für eine horizontale scrollbar-auch - igitt. DH nur die Höhe der einzelnen td zu dem, was ich hatte angegeben, der die Höhe des tbody werden. Hier ist das beste, das ich kommen konnte mit:

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

InformationsquelleAutor der Antwort Chris Marasti-Georg

7

Was Sie brauchen, ist :

1) habe eine Tabelle Körper begrenzter Höhe wie Blättern tritt nur auf, wenn Inhalt größer als das Fenster scrollen. Allerdings tbody nicht abgeschätzt werden kann, und Sie haben, um es anzuzeigen als block zu tun:
```
tbody {
   overflow-y: auto;
   display: block;
   max-height: 10em;    //For example
}
```
2) Re-sync-table-header und table-body-Spalten-breiten als das letztere eine block machte es zu einem unabhängigen element. Der einzige Weg dies zu tun ist, zu simulieren, ist die Synchronisation mit die Durchsetzung der gleichen Spalten Breite zu beiden.

Jedoch, da tbody selbst ist ein block jetzt kann es nicht mehr Verhalten wie ein table. Da müssen Sie noch ein table Verhalten zur Anzeige, die Sie Spalten korrekt, die Lösung ist zu Fragen, für jede Ihrer Zeilen anzeigen als einzelne tables:
```
thead {         
   display: table;  
   width: 100%;     //Fill the containing table
}
tbody tr {
   display: table;
   width: 100%;     //Fill the containing table
}
```
(Beachten Sie, dass mit dieser Technik, werden Sie nicht in der Lage zu überspannen Zeilen mehr).

Sobald das erledigt ist, können Sie erzwingen die Spaltenbreite, um die gleiche Breite in beide thead und tbody. Sie konnte nicht,:
- individuell für jede Spalte (durch bestimmte CSS-Klassen oder inline-styling), das ist ziemlich mühsam, Sie zu tun, für jede Tabelle eine Instanz ;
- einheitlich für alle Spalten (durch th, td { width: 20%; } wenn du 5 Spalten zum Beispiel), was praktischer ist (keine Notwendigkeit, legen Sie die Breite für jede Tabelle eine Instanz), aber nicht Arbeit für alle Spalten zählen
- einheitlich für alle Spalten zählen, über ein festes Tabellen-layout.
Ich lieber die Letzte option, die Hinzugefügt werden müssen:
```
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
}    
```
Finden Sie eine demo -hier, entstanden aus der Antwort auf diese Frage.

InformationsquelleAutor der Antwort Javarome
4

Edit: Dies ist eine sehr alte Antwort und ist hier für Wohlstand, nur um zu zeigen, dass Sie unterstützt wurde, wieder in den 2000er Jahren aber fallen gelassen, da Browser-Strategie im Jahr 2010 war hinsichtlich W3C-Spezifikationen, auch wenn einige features wurden entfernt: Scrollbare Tabelle mit festen header/footer war ungeschickt angegeben werden, bevor HTML5.

Schlechte Nachrichten

Leider gibt es keine elegante Art und Weise zu handhaben scrollbare Tabelle mit festen thead/tfoot
da HTML - /CSS-Spezifikationen sind nicht sehr klar darüber, dass die Funktion.

Erklärungen

Obwohl HTML-4.01-Spezifikation sagt thead/tfoot/tbody verwendet (eingeführt?) zum scrollen der Tabelle Körper:

Zeilen der Tabelle können gruppiert werden, [ ... ] mit dem THEAD -, TFOOT-und TBODY-Elemente [...].
Diese Aufteilung ermöglicht dem Benutzer, Agenten zu unterstützen scrollen der Tabelle stellen unabhängig von der Tabelle, Kopf und Fuß.

Aber die arbeiten scrollbare Tabelle feature auf FF 3.6 entfernt wurde in FF 3.7 da als ein Fehler, da nicht kompatibel mit HTML/CSS-Spezifikationen. Sehen diese und dass get Kommentare über FF-bugs.

Mozilla Developer Network Tipp

Unten ist eine vereinfachte version des MDN nützliche Tipps für scrollbare Tabelle

siehe diese Seite archiviert oder die aktuelle französische version
```
<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>
```
Jedoch MDN sagt auch dies funktioniert nun nicht mehr auf FF 🙁

Ich habe auch getestet auf IE8 => Tabelle nicht Scrollbar ist entweder :-((

InformationsquelleAutor der Antwort olibre
3

Nicht sicher, ob jemand noch auf der Suche, dieses aber so ist, wie ich dies getan haben, vorher ist die Verwendung von zwei Tabellen zur Anzeige der original-Tabelle - die ersten nur in der ursprünglichen Tabelle Titel-Zeile und keine table-body-Zeilen (oder einen leeren Text-Zeile, um es zu validieren).

Die zweite ist in einem separaten div-Element und hat keinen Titel und nur die ursprüngliche table-body-Zeilen. Das separate div wird dann Scrollbar.

Die zweite Tabelle im div platziert wird, der gerade unterhalb der ersten Tabelle in der HTML und es sieht aus wie eine einzelne Tabelle mit festen header und einem scrollbaren unteren Abschnitt. Ich habe nur diese getestet in Safari, Firefox und IE (neueste Versionen der im Frühjahr 2010), aber es funktionierte in allen von Ihnen.

Das einzige Problem, es hatte war, dass die erste Tabelle würde nicht validieren, ohne einen Körper (W3.org validator - XHTML 1.0 strict), und wenn ich fügte hinzu, eine mit keine Inhalte, die es bewirkt, dass eine leere Zeile. Sie können CSS verwenden, um diese nicht sichtbar, aber es frisst immernoch Platz auf der Seite.

InformationsquelleAutor der Antwort Mick

Diese Lösung funktioniert in Chrome 35, Firefox 30 und IE 11 (andere Versionen nicht getestet)

Seiner reinen CSS:
http://jsfiddle.net/ffabreti/d4sope1u/

Alles auf display:block, Tabelle a Höhe:

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

InformationsquelleAutor der Antwort Fernando Fabreti

2

Diese verursacht mir große Kopfschmerzen zu versuchen, wie ein Gitter für eine Anwendung von uns. Ich habe versucht, alle verschiedene Techniken heraus dort, aber Sie hatten alle Probleme. Der nächstgelegene ich kam mit war ein jQuery-plugin, wie Flexigrid (Blick auf http://www.ajaxrain.com für alternativen), aber das scheint nicht zu support-100% Breite-Tabellen, die ist, was ich brauchte.

Was ich am Ende tun war rolling meinen eigenen; Firefox unterstützt scrollen tbody Elemente, so dass ich browser schnupperte und benutzt entsprechende CSS (Einstellung der Höhe, overflow, etc... Fragen, wenn Sie mehr details wollen) zu machen, scrollen, und dann für die anderen Browser, die ich verwendet zwei getrennte Tabellen zu verwenden table-layout: fixed was nutzt ein sizing-Algorithmus, der garantiert nicht zu überlaufen der angegebenen Größe (normale Tabellen erweitern, wenn der Inhalt zu groß, um zu passen). Indem beide Tabellen identisch breiten war ich in der Lage, Ihre Spalten zum line-up. Ich wickelte das zweite in ein div gesetzt, um zu Blättern und mit ein bisschen jiggery pokery mit Margen usw verwaltet, um das Aussehen und das Gefühl wollte ich.

Sorry, wenn diese Antwort hört sich ein wenig vage an Orten; ich Schreibe schnell da ich nicht viel Zeit haben. Hinterlasst einen Kommentar, wenn Sie möchten, dass ich weiter ins Detail zu gehen!

InformationsquelleAutor der Antwort Luke Bennett

Hier ist ein code, der wirklich funktioniert für IE und FF (mindestens):

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

Habe ich geändert, der original-code, um es klarer und auch, es funktioniert Prima im IE und auch FF..

Original-code HIER

InformationsquelleAutor der Antwort Daniel Costa

1

Hier ist meine alternative. Es verwendet auch die verschiedenen DIVs für header, body und footer, aber synchronisiert zum Fenster Größenänderung und mit suchen, Blättern, Sortieren, filtern und Positionierung:

Mein CD-Listen

Klicken Sie auf die Jazz, Klassik,... - buttons, um die Tabellen. Es ist so eingerichtet, dass Sie ist ausreichend, auch wenn JavaScript ausgeschaltet ist.

Scheint OK, auf IE, FF und WebKit (Chrome, Safari).

InformationsquelleAutor der Antwort goneill
1

Sorry ich habe.t Lesen alle Antworten auf deine Frage.

Ja hier die Sache, die Sie wollen (habe ich bereits getan)

Können Sie zwei Tabellen mit der gleichen Klasse Namen für ähnliche styling, das man nur mit Tabellen-Kopf-und andere mit Ihren Zeilen.
Setzen Sie nun diese Tabelle in einem div mit fester Höhe mit overflow-y:auto ODER scroll.

InformationsquelleAutor der Antwort Sanuj
1

Das größte problem hatte ich mit der obigen Vorschläge konnte, plug in tablesorter.js UND in der Lage sein zu schweben die überschriften für die Tabelle beschränkt sich auf eine bestimmte max-Größe. Ich schließlich stolperte über das plugin jQuery.floatThead, die das floating-Header und erlaubt das Sortieren, um weiter zu arbeiten.

Es hat auch einen schönen Vergleich Seite zeigt sich vs ähnliche plugins.

InformationsquelleAutor der Antwort Guy Hollington

Wenn seine ok, JavaScript zu verwenden, hier ist meine Lösung
Erstellen Sie eine Tabelle, Feste Breite für alle Spalten (Pixel!) fügen Sie die Klasse Scrollify auf die Tabelle, und fügen Sie dieses javascript + jquery 1.4.x Höhe in css oder style!

Getestet: Opera, Chrome, Safari, FF, IE5.5(Epischen Skript fehlschlagen), 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);
}

Edit: Feste Höhe.

InformationsquelleAutor der Antwort Peter

Kann ich das mit javascript (keine Bibliothek) und CSS - Tabelle Körper scrollt mit der Seite, und die Tabelle muss keine Feste Breite oder Höhe, obwohl jede Spalte muss über eine Breite. Sie können auch halten Sie die Sortierung Funktionalität.

Grundsätzlich:

In HTML, erstellen container-divs um position in der Kopfzeile der Tabelle Zeile und die
Tabelle Körper, erstellen Sie auch eine "Maske" div ausblenden der Tabelle Körper, wie es
scrollt der header
In CSS konvertieren Sie die Tabelle, Teile, Blöcke
In Javascript, Holen Sie die Breite der Tabelle und passen Sie die Maske an Breite bekommen...
die Höhe der content der Seite... Messen Sie die scroll-position...
manipulieren von CSS, um die Zeile mit der Tabellenüberschrift position und die Maske
Höhe

Hier ist der javascript-und eine jsFiddle DEMO.

//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();
}

InformationsquelleAutor der Antwort Deborah

Für mich, nichts im Hinblick auf das scrolling wirklich funktioniert, bis ich entfernte die Breite von der Tabelle mit CSS. Ursprünglich war die Tabelle CSS-sah so aus:

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

Sobald ich entfernt, die width:100%; alle Scroll-Funktionen zu arbeiten begonnen.

InformationsquelleAutor der Antwort Matthew Park

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.

Schlechte Nachrichten

Erklärungen

Mozilla Developer Network Tipp