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

148

Ich schreibe eine Seite, auf der ich eine HTML-Tabelle benötige, um eine festgelegte Größe beizubehalten. Ich brauche die Überschriften oben in der Tabelle, um jederzeit dort zu bleiben, aber ich brauche auch den Hauptteil der Tabelle, um zu scrollen, egal wie viele Zeilen zur Tabelle hinzugefügt werden. Denken Sie an eine Mini-Version von Excel. Dies scheint eine einfache Aufgabe zu sein, aber fast jede Lösung, die ich im Web gefunden habe, hat einige Nachteile. Wie kann ich das lösen?

javascript  html  css  html-table 
— Minze
quelle
2
Es gibt viele Beispiele da draußen. Dieser ist einer von ihnen .
— Darren Kopp
Ich muss IE6, IE7, FF, ... aber vor allem IE leider
— minty
Es gibt viele CSS-Hacks. Es sollte trivial sein, in IE7 zu arbeiten.
— Jim
4
Ich interessiere mich für die Antwort für alle Browser!
— Minze
15
"Es sollte trivial sein, in IE7 zu arbeiten." Jim, bist du das? Bist du mein Projektmanager? :)
— Aaronius

Antworten:

53

Ich musste die gleiche Antwort finden. Das beste Beispiel, das ich gefunden habe, ist http://www.cssplay.co.uk/menu/tablescroll.html - ich habe festgestellt, dass Beispiel 2 für mich gut funktioniert hat. Sie müssen die Höhe der inneren Tabelle mit Java Script festlegen, der Rest ist CSS.

— Ken Penn
quelle
3
Leider schlägt diese Methode fehl, wenn Sie eine breite Tabelle haben (horizontaler Bildlauf). Sie haben zwei horizontale Bildlaufleisten. eine für den Header und eine für die Daten.
— Vol7ron
4
Ihre Lösung funktioniert nicht, wenn Sie nicht <th> width in <thead> angeben
— Alexandru R
2
Könnten Sie diese Antwort so bearbeiten, dass sie die relevanten Bits aus dem Link enthält, um den (relativ) neuen Stack Overflow-Standards zu entsprechen?
— Fund Monica Klage
Wo ist die Quelle, Billy?
— Candlejack
Es ist unmöglich, die Spaltenbreiten zwischen dem Header und dem (scrollbaren) Tabellenkörper zu synchronisieren, ohne auf JavaScript oder vordefinierte Werte zurückzugreifen.
— Rustyx
12

Ich sah Sean Haddys hervorragende Lösung für eine ähnliche Frage und nahm mir die Freiheit , einige Änderungen vorzunehmen :

  • Verwenden Sie Klassen anstelle von ID, sodass ein jQuery-Skript für mehrere Tabellen auf einer Seite wiederverwendet werden kann
  • Unterstützung für semantische HTML-Tabellenelemente wie caption, thead, tfoot und tbody hinzugefügt
  • Die Bildlaufleiste wurde optional gemacht, sodass sie nicht für Tabellen angezeigt wird, die "kürzer" als die scrollbare Höhe sind
  • Die Breite des Bildlauf-Divs wurde angepasst, um die Bildlaufleiste an den rechten Rand der Tabelle zu bringen
  • Konzept zugänglich gemacht durch
    • Verwenden von aria-hidden = "true" für den injizierten statischen Tabellenheader
    • und den ursprünglichen Kopf an Ort und Stelle belassen, nur mit jQuery versteckt und gesetzt aria-hidden="false"
  • Beispiele für mehrere Tabellen mit unterschiedlichen Größen

Sean machte das schwere Heben. Vielen Dank auch an Matt Burland für den Hinweis, dass der Fuß unterstützt werden muss.

Überzeugen Sie sich selbst unter http://jsfiddle.net/jhfrench/eNP2N/

— Jeromy Französisch
quelle
Gut, aber es geht schief, wenn Sie eine Kopf- und Fußzeile wollen!
— Matt Burland
3
Danke Matt, ich habe die Anpassung vorgenommen.
— Jeromy French
Die Ausrichtung muss angepasst werden, wenn Sie die td- und th-Ränder anzeigen.
— Dhochee
8

Haben Sie versucht, Thead und Tbody zu verwenden und eine feste Höhe für Tbody mit Überlauf festzulegen: Scrollen?

Was sind Ihre Zielbrowser?

EDIT: In Firefox hat es (fast) gut funktioniert - das Hinzufügen der vertikalen Bildlaufleiste hat auch die Notwendigkeit einer horizontalen Bildlaufleiste verursacht - igitt. IE stellte einfach die Höhe jedes td auf das ein, was ich die Höhe von tbody angegeben hatte, um zu sein. Hier ist das Beste, was ich mir vorstellen kann:

<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
quelle
1
Ich muss IE6, IE7, FF, ... aber vor allem IE leider
— minty
Ändern Sie die Tabelle so, dass sie weniger als 100% breit ist, sagen wir 99%, und das Problem sollte
— behoben sein
2
overflow-x: hidden;und overflow-y: autoauch helfen.
— Justkt
7
Dies funktionierte früher in Firefox und ist der offensichtliche und nicht umständliche Code. In neueren Versionen von Firefox ist es jedoch defekt.
— Rasmus Kaj
6
Dies funktioniert nicht, da "Überlauf" nur für " Blockcontainer " ( w3.org/TR/CSS21/visufx.html#overflow ) gilt und Tabellenfelder keine " Blockcontainer " sind ( w3.org/TR/CSS21/). visuren.html # blockboxen ).
— Mhsmith
8

Was Sie brauchen ist:

1) einen Tabellenkörper mit begrenzter Höhe haben, da der Bildlauf nur dann erfolgt, wenn der Inhalt größer als das Bildlauffenster ist. Die tbodyGröße kann jedoch nicht festgelegt werden, und Sie müssen sie als Folgendes anzeigen block:

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

2) Synchronisieren Sie die Spaltenbreiten des Tabellenkopfs und des Tabellenkörpers erneut , um letztere blockzu einem nicht verwandten Element zu machen. Die einzige Möglichkeit, dies zu tun, besteht darin, die Synchronisation zu simulieren, indem für beide dieselbe Spaltenbreite erzwungen wird .

Da es tbodysich jedoch um ein blockJetzt handelt, kann es sich nicht mehr wie ein Jetzt verhalten table. Da Sie immer noch ein tableVerhalten benötigen , um Ihre Spalten korrekt anzuzeigen, besteht die Lösung darin, jede Ihrer Zeilen als einzelne tables anzuzeigen :

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

(Beachten Sie, dass Sie mit dieser Technik keine Zeilen mehr überspannen können.)

Sobald dies erledigt ist, können Sie die Spaltenbreite so erzwingen, dass sie in theadund die gleiche Breite hat tbody. Das konnte man nicht:

  • einzeln für jede Spalte (durch bestimmte CSS-Klassen oder Inline-Styling), was für jede Tabelleninstanz ziemlich mühsam ist;
  • einheitlich für alle Spalten (bis, th, td { width: 20%; }wenn Sie beispielsweise 5 Spalten haben), was praktischer ist (keine Notwendigkeit, die Breite für jede Tabelleninstanz festzulegen), aber für keine Spaltenanzahl funktionieren kann
  • einheitlich für jede Spaltenanzahl durch ein festes Tabellenlayout.

Ich bevorzuge die letzte Option, die hinzugefügt werden muss:

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
}

Hier finden Sie eine Demo hier , aus der Antwort auf gegabelt diese Frage .

— Javarome
quelle
Danke für die Erklärung. Es ist verführerisch, auf wie viele Arten so etwas getan werden kann, und die meisten Antworten enthalten nur einen Code und einen Plunkr-Link, sodass Sie es selbst herausfinden können.
— Paul Rooney
4

Bearbeiten:   Dies ist eine sehr alte Antwort und dient dem Wohlstand, nur um zu zeigen, dass sie bereits in den 2000er Jahren unterstützt wurde, aber fallen gelassen wurde, weil die Browser-Strategie in den 2010er Jahren darin bestand, die W3C-Spezifikationen zu respektieren, selbst wenn einige Funktionen entfernt wurden: Bildlauftabelle mit festem Header / footer wurde ungeschickt vor HTML5 angegeben.

Schlechte Nachrichten

Leider gibt es keine elegante Möglichkeit, mit scrollbaren Tabellen mit festem thead/ umzugehen, tfoot da HTML / CSS-Spezifikationen für diese Funktion nicht sehr klar sind .

Erklärungen

Obwohl HTML 4.01 Spezifikation sagt thead/ tfoot/ tbodyverwendet werden , um Tabellenkörper Spirale (eingeführt?):

Tabellenzeilen können mit den Elementen THEAD, TFOOT und TBODY [...] gruppiert werden. Diese Unterteilung ermöglicht es Benutzeragenten, das Scrollen von Tabellenkörpern unabhängig von Kopf und Fuß des Tisches zu unterstützen.

Die funktionierende Funktion für scrollbare Tabellen in FF 3.6 wurde in FF 3.7 entfernt, da sie als Fehler angesehen wird, da sie nicht den HTML / CSS-Spezifikationen entspricht. Siehe dies und das Kommentare zu FF-Fehlern.

Mozilla Developer Network-Tipp

Unten finden Sie eine vereinfachte Version des MDN. Nützliche Tipps für scrollbare Tabellen finden
Sie auf dieser archivierten Seite oder in der aktuellen französischen 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>

Allerdings sagt MDN auch, dass dies unter FF nicht mehr funktioniert :-(
Ich habe auch auf IE8 getestet => Tabelle ist auch nicht scrollbar: - ((

— olibre
quelle
MDN-Tipps für scrollbare Tabellenverknüpfungen sind keine relevanten Informationen, die über das Zusammenbrechen von Grenzen sprechen. Vielleicht wurde die Seite geändert, weil 5 Jahre vergangen sind
— partizanos
Danke @partizanos Ich habe endlich die ursprüngliche Wiki-Seite in der MDN-Geschichte gefunden! Meine alte Antwort scheint jetzt veraltet zu sein, aber für den Wohlstand wird die nächste Generation von Entwicklern wissen, dass es in den 2000er Jahren möglich und einfach zu implementieren war
— ;-)
3

Ich bin mir nicht sicher, ob sich jemand noch damit befasst, aber ich habe dies zuvor getan, indem ich zwei Tabellen verwendet habe, um die einzelne Originaltabelle anzuzeigen - die erste nur die ursprüngliche Tabellentitelzeile und keine Tabellenkörperzeilen (oder eine leere Textzeile) es validieren).

Die zweite befindet sich in einem separaten Div und hat keinen Titel und nur die ursprünglichen Tabellenkörperzeilen. Das separate Div wird dann scrollbar gemacht.

Die zweite Tabelle in ihrem div befindet sich direkt unter der ersten Tabelle im HTML-Code und sieht aus wie eine einzelne Tabelle mit einem festen Header und einem scrollbaren unteren Bereich. Ich habe dies nur in Safari, Firefox und IE getestet (jeweils die neuesten Versionen im Frühjahr 2010), aber es hat in allen funktioniert.

Das einzige Problem war, dass die erste Tabelle ohne Text nicht validiert werden konnte (W3.org-Validator - XHTML 1.0 strict), und wenn ich eine ohne Inhalt hinzufügte, verursachte dies eine leere Zeile. Sie können CSS verwenden, um dies nicht sichtbar zu machen, aber es verbraucht immer noch Platz auf der Seite.

— Mick
quelle
Wie würde die zusätzliche Reihe noch Platz beanspruchen? Es muss keinen Bildschirmplatz beanspruchen, wenn Sie verwenden display: none;, es sei denn, Sie meinen Platz in der Quelle ..?
— ClarkeyBoy
3

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

Es ist reines CSS: http://jsfiddle.net/ffabreti/d4sope1u/

Alles wird angezeigt: Block, Tisch braucht eine 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;
    }
— Fernando Fabreti
quelle
2

Dies bereitete mir große Kopfschmerzen beim Versuch, ein solches Raster für eine unserer Anwendungen zu implementieren. Ich habe all die verschiedenen Techniken ausprobiert, aber sie hatten jeweils Probleme. Am nächsten kam ich mit einem jQuery-Plugin wie Flexigrid ( Alternativen finden Sie unter http://www.ajaxrain.com ), aber dies scheint keine 100% breiten Tabellen zu unterstützen, was ich brauchte.

Am Ende rollte ich meine eigenen; Firefox unterstützt Bildlaufelemente tbody, daher habe ich den Browser beschnüffelt und geeignetes CSS (Einstellungshöhe, Überlauf usw.) verwendet, um diesen Bildlauf durchzuführen. Für andere Browser habe ich zwei separate Tabellen verwendet, table-layout: fixeddie eine Größe verwenden Algorithmus, der garantiert, dass die angegebene Größe nicht überläuft (normale Tabellen werden erweitert, wenn der Inhalt zu breit ist, um zu passen). Indem ich beiden Tabellen identische Breiten gab, konnte ich ihre Spalten in eine Reihe bringen. Ich wickelte den zweiten in ein Div-Set, um zu scrollen, und mit ein bisschen Jiggery Pokery mit Rändern usw. gelang es mir, das gewünschte Erscheinungsbild zu erhalten.

Tut mir leid, wenn diese Antwort an manchen Stellen etwas vage klingt; Ich schreibe schnell, da ich nicht viel Zeit habe. Hinterlasse einen Kommentar, wenn ich weiter expandieren soll!

— Luke Bennett
quelle
Es tut mir leid, diesen alten Thread wiederzubeleben, aber ich muss wirklich wissen, wie Sie das herausgefunden haben. Ich habe FF zum Laufen gebracht, aber keine IE / WebKit-Browser. Bitte helfen Sie, wenn Sie können.
— Alfero Chingono
2

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

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

Ich habe den ursprünglichen Code geändert, um ihn klarer zu machen und um ihn in IE und auch in FF einwandfrei funktionieren zu lassen.

Originalcode HIER

— Daniel Costa
quelle
1
In IE7 / 8 funktioniert dies nur im Quirks-Modus und es funktioniert nicht mehr, sobald Sie einen Doctype hinzufügen, dh<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
— ccpizza
1

Hier ist meine Alternative. Es werden auch verschiedene DIVs für Kopf-, Körper- und Fußzeile verwendet, die jedoch für die Größenänderung von Fenstern und für das Suchen, Scrollen, Sortieren, Filtern und Positionieren synchronisiert sind:

Meine CD-Listen

Klicken Sie auf die Schaltflächen Jazz, Klassik ..., um die Tabellen anzuzeigen. Es ist so eingerichtet, dass es auch dann ausreichend ist, wenn JavaScript deaktiviert ist.

Scheint in IE, FF und WebKit (Chrome, Safari) in Ordnung zu sein.

— gegangen
quelle
1

Entschuldigung, ich habe nicht alle Antworten auf Ihre Frage gelesen.

Ja hier das was du willst (ich habe es schon gemacht)

Sie können zwei Tabellen mit demselben Klassennamen für eine ähnliche Gestaltung verwenden, eine nur mit Tabellenkopf und eine andere mit Ihren Zeilen. Legen Sie diese Tabelle nun in ein Div mit fester Höhe mit Überlauf-y: Auto ODER Bildlauf.

— Sanuj
quelle
1

Das Hauptproblem, das ich mit den obigen Vorschlägen hatte, war das Einfügen von tablesorter.js UND das Verschieben der Header für eine Tabelle, die auf eine bestimmte maximale Größe beschränkt war. Ich stolperte schließlich über das Plugin jQuery.floatThead, das die schwebenden Header bereitstellte und das Sortieren weiter funktionierte.

Es hat auch eine schöne Vergleichsseite, die sich mit ähnlichen Plugins zeigt .

— Guy Hollington
quelle
1

Live JsFiddle

Es ist nur mit HTML & CSS möglich

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>
Erweitern Sie das Snippet

— Md. Rafee
quelle
0

Wenn es in Ordnung ist, JavaScript zu verwenden, ist dies meine Lösung. Erstellen Sie eine Tabelle mit fester Breite für alle Spalten (Pixel!). Fügen Sie die Klasse Scrollify zur Tabelle hinzu und fügen Sie dieses Javascript + jquery 1.4.x hinzu. Stellen Sie die Höhe in CSS oder Stil ein!

Getestet in: Opera, Chrome, Safari, FF, IE5.5 ( episches Skript schlägt fehl ), 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);
}

Bearbeiten: Feste Höhe.

— Peter
quelle
0

Ich mache dies mit Javascript (keine Bibliothek) und CSS - der Tabellenkörper scrollt mit der Seite, und die Tabelle muss keine feste Breite oder Höhe haben, obwohl jede Spalte eine Breite haben muss. Sie können die Sortierfunktion auch beibehalten.

Grundsätzlich:

  1. Erstellen Sie in HTML Container-Divs, um die Tabellenkopfzeile und den Tabellenkörper zu positionieren, und erstellen Sie ein "mask" -Div, um den Tabellenkörper auszublenden, wenn er am Header vorbeirollt

  2. Konvertieren Sie in CSS die Tabellenteile in Blöcke

  3. Ermitteln Sie in Javascript die Tabellenbreite und passen Sie die Breite der Maske an ... ermitteln Sie die Höhe des Seiteninhalts ... messen Sie die Bildlaufposition ... bearbeiten Sie CSS, um die Position der Tabellenkopfzeile und die Maskenhöhe festzulegen

Hier ist das Javascript und ein 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();
}
— Deborah
quelle
Aber in Ihrer Demo bleibt der Tabellenkopf nicht stehen, sondern rollt nur weg. (Chrom hier.)
— Gr.
Ich sehe das nicht in Chrome. Sind Sie sicher, dass Sie die gelb hervorgehobenen Zellen nicht mit Anweisungen in Rot für die Kopfzeile verwechseln? Die Kopfzellen befinden sich oben und sind grau auf grau ("Spalte 1", "Spalte 2" usw.).
— Deborah
0

Für mich hat nichts im Zusammenhang mit dem Scrollen wirklich funktioniert, bis ich die Breite aus dem Tabellen-CSS entfernt habe. Ursprünglich sah die Tabelle CSS folgendermaßen 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 die Breite entfernt habe: 100%; Alle Bildlauffunktionen funktionierten.

— Matthew Park
quelle
0

Wenn Sie niedrig genug Standards haben;) können Sie eine Tabelle, die nur einen Header enthält, direkt über einer Tabelle platzieren, die nur einen Body enthält. Es wird nicht horizontal gescrollt, aber wenn Sie das nicht brauchen ...

— M610
quelle
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.