HTML-Tabellenüberschriften sind beim Anzeigen einer großen Tabelle immer oben im Fenster sichtbar

169

Ich möchte in der Lage sein, die Präsentation einer HTML-Tabelle zu "optimieren", um eine einzelne Funktion hinzuzufügen: Wenn Sie durch die Seite scrollen, sodass die Tabelle auf dem Bildschirm angezeigt wird, die Kopfzeilen jedoch außerhalb des Bildschirms liegen, möchte ich, dass die Kopfzeilen erhalten bleiben oben im Anzeigebereich sichtbar.

Dies entspricht konzeptionell der Funktion "Fenster einfrieren" in Excel. Eine HTML-Seite kann jedoch mehrere Tabellen enthalten, und ich möchte, dass dies nur für die Tabelle geschieht, die derzeit angezeigt wird, nur während sie angezeigt wird.

Hinweis: Ich habe eine Lösung gesehen, bei der der Tabellendatenbereich scrollbar gemacht wird, während die Überschriften nicht scrollen. Das ist nicht die Lösung, nach der ich suche.

Craig McQueen
quelle
Ist Ihre Seite mit Tabellen gestaltet? ist es nicht möglich, es zuerst in divs zu konvertieren und tabellarische Daten für die Tabellen in Ruhe zu lassen?
Sperre
6
Ich habe kürzlich ein Plugin geschrieben, das dies tut: Programmierdrunk.com/floatThead
mkoryak
1
Zusätzlich zu der am besten bewerteten Lösung und den Ableitungen davon unten ist das Plugin von @mkoryak oben auch ziemlich gut. Schauen Sie sich das auch an, bevor Sie mit dem "Einkaufen" fertig sind.
DanO
Danke dan :) Ich habe einige Kick-Ass-Features für die nächste Veröffentlichung geplant
mkoryak
Ich habe das floatthead-Plugin @mkoryak unterstützt - ich konnte es schnell integrieren. Vielen Dank für das Plugin!
w5m

Antworten:

67

Schauen Sie sich jQuery.floatThead ( Demos verfügbar ) an, das sehr cool ist, auch mit DataTables funktioniert und sogar in einem overflow: autoContainer funktioniert .

Hendy Irawan
quelle
Ja, es funktioniert mit horizontalem Scrollen, Fenster-Scrollen, innerem Scrollen und Fenstergrößenänderung.
Mkoryak
Könnten Sie eine Geige mit einem Arbeitscode hinzufügen? (Ich weiß, dass es auf der Website gibt ...)
Michel Ayres
12
Ich habe eine riesige Demo / Docs-Seite erstellt. Warum brauchst du eine Geige?
Mkoryak
5
@MustModify stackoverflow ist kein guter Ort, um mir Fragen zu stellen. Melde ein Problem auf Github, auch wenn es nur eine Frage ist, wie es funktioniert. Ich antworte dort normalerweise in weniger als einem Tag. Hier werde
ich
1
@MustModify für was es wert ist, keine der Klassen in den Tabellen in den Beispielen ist relevant. Das Plugin benötigt keine CSS oder Klassen, um zu funktionieren, wie meine Dokumente sagen.
Mkoryak
135

Ich habe mit jQuery eine Proof-of-Concept-Lösung erstellt .

Beispiel hier ansehen.

Ich habe diesen Code jetzt in einem Mercurial Bitbucket-Repository . Die Hauptdatei ist tables.html.

Mir ist ein Problem dabei bekannt: Wenn die Tabelle Anker enthält und Sie die URL mit dem angegebenen Anker in einem Browser öffnen, wird die Zeile mit dem Anker beim Laden der Seite wahrscheinlich durch den schwebenden Header verdeckt.

Update 11.12.2017: Ich sehe, dass dies mit dem aktuellen Firefox (57) und Chrome (63) nicht funktioniert. Ich bin mir nicht sicher, wann und warum dies nicht mehr funktioniert oder wie es behoben werden kann. Aber jetzt denke ich, dass die akzeptierte Antwort von Hendy Irawan überlegen ist.

Craig McQueen
quelle
Ich brauchte das für etwas, das ich tue. Große Hilfe, danke. Bei mir habe ich das Fenster nicht verwendet, da der Bildlaufbereich ein Div innerhalb des HTML-Codes war. Also musste ich wechseln floatingHeaderRow.css("top", Math.min(scrollTop - offset.top, $(this).height() - floatingHeaderRow.height()) + "px");, floatingHeaderRow.css("top", scrollTop + "px");da mit dem Code, den Sie hatten, der Tabellenkopf weiter nach unten sprang, um schließlich von der Seite zu verschwinden.
Nalum
1
Ich versuche dies in meiner Tabelle zu implementieren. Ich habe ein Problem mit der Headerbreite. Die Daten in den Zeilen sind Werte, die aus einer Datenbank gezogen werden, da diese eine zufällige Länge haben. Bevor Sie einen Bildlauf durchführen, haben die Überschriften ihre automatisch vererbte Größe. Sobald Sie jedoch einen Bildlauf durchführen, werden die Überschriften so geändert, dass sie um die Kopfzeilennamen gewickelt werden. Daher haben sie eine viel geringere Breite, sodass die Überschriften nicht über ihrer jeweiligen Größe angezeigt werden Säule. Wie kann ich dieses Problem beheben?
JonYork
Hmm, ich bin mir nicht sicher, basierend auf deiner Beschreibung. Ich schlage vor, 1) wenn möglich, ein Beispiel online zu zeigen; 2) Stellen Sie es als Frage zu StackOverflow.
Craig McQueen
@ JonYork Ich hatte genau das gleiche Problem. Mein Problem war die Verwendung von <td> in der Kopfzeile anstelle von <th>, sodass die Breite jeder Spalte nicht auf nicht vorhandenes <th> angewendet werden konnte (siehe // Copy cell widths from original headerTeil des Codes). @Craig McQueen, bitte bearbeiten Sie Ihre Antwort, damit niemand diesen Fehler macht.
Aexl
@CraigMcQueen Wenn ich Ihren fantastischen Code verwende (danke), bricht er in der zweiten Tabelle, die sich hinter einem anderen Tab befindet (jQuery-Tab-Plugin). Irgendwelche Gedanken? Die Kopfzeile wird ganz links platziert, anstatt den Positionsspalten zu folgen. Funktioniert aber perfekt auf der Tabelle in der ersten Registerkarte jQuery.
Richard Żak
68

Craig, ich habe deinen Code ein wenig verfeinert (unter anderem verwendet er jetzt position: fixed) und ihn als jQuery-Plugin verpackt.

Probieren Sie es hier aus: http://jsfiddle.net/jmosbech/stFcx/

Die Quelle finden Sie hier: https://github.com/jmosbech/StickyTableHeaders

jmosbech
quelle
1
Gute Idee, ein jQuery-Plugin zu erstellen. Ein paar Fragen: (1) Funktioniert es gut mit horizontalem Scrollen? (2) Wie verhält es sich, wenn Sie nach unten scrollen, sodass der untere Rand der Tabelle vom oberen Rand des Fensters rollt? Das Beispiel erlaubt kein Testen dieser Fälle.
Craig McQueen
Ihr jsfiddle-Beispiel funktioniert hervorragend mit Tablesorter, der Code auf github jedoch nicht. Mussten Sie den Tablesorter-Code ändern?
Ericlaw
Craig, horizontales Scrollen sollte kein Problem sein, da der Header beim Scrollen und Ändern der Größe sowohl horizontal als auch vertikal neu positioniert wird. Zu Ihrer zweiten Frage: Die Kopfzeile wird ausgeblendet, wenn die Tabelle das Ansichtsfenster verlässt.
jmosbech
Eric, das ist seltsam. Haben Sie versucht, /demo/tablesorter.htm von Github aus zu öffnen? Ich habe den Tablesorter-Code nicht geändert, aber damit er funktioniert, müssen Sie vor dem Tablesorter das StickyTableHeader-Plugin anwenden.
jmosbech
2
Das horizontale Scrollen funktioniert nicht ganz. Nach dem Scrollen über eine gewisse Entfernung wird der Kopf beim Scrollen außerhalb des Bildschirms weiter links positioniert als beim normalen Positionieren als Teil der Tabelle.
Nathan Phillips
16

Wenn Sie auf moderne CSS3-kompatible Browser abzielen (Browserunterstützung : https://caniuse.com/#feat=css-sticky ), können Sie verwenden position:sticky, für die kein JS erforderlich ist und das Tabellenlayout nicht fehlerhaft ausgerichtet wird und td derselben Spalte. Es ist auch keine feste Spaltenbreite erforderlich, um ordnungsgemäß zu funktionieren.

Beispiel für eine einzelne Kopfzeile:

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

Für Köpfe mit 1 oder 2 Reihen können Sie Folgendes verwenden:

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 */
}

Möglicherweise müssen Sie ein wenig mit der Top- Eigenschaft des letzten untergeordneten Elements spielen und die Anzahl der Pixel ändern, um sie an die Höhe der ersten Zeile anzupassen (+ Rand + Rand + Polsterung, falls vorhanden), damit die zweite Zeile gerade nach unten bleibt unter dem ersten.

Beide Lösungen funktionieren auch dann, wenn Sie mehr als eine Tabelle auf derselben Seite haben: Das thElement jeder Tabelle beginnt zu kleben, wenn seine oberste Position die in der CSS-Definition angegebene ist, und verschwindet einfach, wenn alle Tabellen nach unten scrollen. Wenn es also mehr Tische gibt, funktionieren alle auf die gleiche Weise.

Warum das letzte Kind vor und das erste Kind danach in der CSS verwenden?

Da CSS-Regeln vom Browser in derselben Reihenfolge gerendert werden, in der Sie sie in die CSS-Datei schreiben, und wenn Sie nur eine Zeile im Thead-Element haben, ist die erste Zeile gleichzeitig auch die letzte Zeile und die Regel für das erste untergeordnete Element erforderlich das letzte Kind zu überschreiben. Wenn nicht, haben Sie einen Versatz der Zeile 30 px vom oberen Rand, den Sie vermutlich nicht möchten.

Ein bekanntes Problem der Position: Sticky ist, dass es nicht für die Kopfelemente oder Tabellenzeilen funktioniert: Sie müssen auf die Elemente abzielen. Das Hopping dieses Problems wird in zukünftigen Browserversionen behoben.

willy wonka
quelle
Das erste Beispiel scheint in Firefox (61) nicht zu funktionieren. Wenn jedoch die Position Sticky auf dem Kopf eingestellt ist, ist dies der Fall.
ewh
1
Sie könnten tun thead tr+tr th, um die zweite Reihe zu zielen.
Teepeemm
5

Mögliche Alternativen

js-float-table-headers

js-float-table-headers (Google Code)

In Drupal

Ich habe eine Drupal 6-Site. Ich war auf der Seite "Module" des Administrators und bemerkte, dass die Tabellen genau diese Funktion hatten!

Wenn man sich den Code ansieht, scheint er von einer aufgerufenen Datei implementiert zu werden tableheader.js. Es wendet die Funktion auf alle Tabellen mit der Klasse an sticky-enabled.

Für eine Drupal-Site möchte ich dieses tableheader.jsModul unverändert für Benutzerinhalte verwenden können. tableheader.jsscheint auf Benutzerinhaltsseiten in Drupal nicht vorhanden zu sein. Ich habe eine Forumsnachricht gepostet, in der ich gefragt werde, wie das Drupal-Thema so geändert werden kann, dass es verfügbar ist. Nach einer Antwort tableheader.jsauf ein Drupal Thema mit hinzugefügt werden , drupal_add_js()in dem Thema ist template.phpwie folgt:

drupal_add_js('misc/tableheader.js', 'core');
Craig McQueen
quelle
Ihr Google Code-Link war für mich sehr nützlich, Tahnks.
Vilius Gaidelis
5

Ich bin vor kurzem auf dieses Problem gestoßen. Leider musste ich 2 Tabellen erstellen, eine für den Header und eine für den Body. Es ist wahrscheinlich nicht der beste Ansatz aller Zeiten, aber hier ist:

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

Das hat bei mir funktioniert, es ist wahrscheinlich nicht die elegante Art, aber es funktioniert. Ich werde untersuchen, ob ich etwas besser machen kann, aber es erlaubt mehrere Tabellen.

Lesen Sie die Überlauf- Eigenschaften, um festzustellen, ob sie Ihren Anforderungen entsprechen

Gab Royer
quelle
Hmm funktioniert nicht, ich werde versuchen, dies zu beheben, aber der Ansatz bleibt, Sie müssen den Überlauf verwenden: Auto Proprety
Gab Royer
Ich schätze Ihre Lösung und ihre Einfachheit, aber in meiner Frage sagte ich: "Hinweis: Ich habe eine Lösung gesehen, bei der der Tabellendatenbereich scrollbar gemacht wird, während die Überschriften nicht scrollen. Das ist nicht die Lösung, nach der ich suche."
Craig McQueen
@GabRoyer Die von Ihnen referenzierte w3school-Seite existiert nicht.
Farhan
Sie scheinen es bewegt zu haben. Behoben
Gab Royer
Ein weiteres Problem bei diesem Ansatz besteht darin, dass Sie, wenn Sie einige Spalten an andere Inhalte anpassen müssen, die Ausrichtung auf die entsprechende Spaltenüberschrift möglicherweise unterbrechen. Meiner Meinung nach ist es besser, diesem Problem mit einem Ansatz zu begegnen, der eine Art dynamische Verwaltung des Inhalts ermöglicht, bei der Spalten und relative Köpfe perfekt ausgerichtet sind. IMHO Position = klebrig ist also der richtige Weg.
Willy Wonka
3

Dies ist wirklich eine schwierige Sache, um einen klebrigen Header auf Ihrem Tisch zu haben. Ich hatte die gleiche Anforderung, aber mit asp: GridView und dann fand ich, dass es wirklich gedacht war, einen klebrigen Header in Gridview zu haben. Es gibt viele Lösungen und ich habe 3 Tage gebraucht, um die gesamte Lösung auszuprobieren, aber keine davon konnte mich befriedigen.

Das Hauptproblem, mit dem ich bei den meisten dieser Lösungen konfrontiert war, war das Ausrichtungsproblem. Wenn Sie versuchen, den Header schwebend zu machen, gerät die Ausrichtung von Header- und Körperzellen irgendwie aus der Bahn.

Bei einigen Lösungen trat auch das Problem auf, dass Header mit den ersten Zeilen des Körpers überlappt wurden, was dazu führte, dass Körperzeilen hinter dem schwebenden Header versteckt wurden.

Also musste ich jetzt meine eigene Logik implementieren, um dies zu erreichen, obwohl ich dies auch nicht als perfekte Lösung betrachte, aber dies könnte auch für jemanden hilfreich sein,

Unten ist die Beispieltabelle.

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

Hinweis : Die Tabelle wird in ein DIV mit dem Klassenattribut 'Tabellenhalter' eingeschlossen.

Unten finden Sie das JQuery-Skript, das ich in meinem HTML-Seitenkopf hinzugefügt habe.

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

und zuletzt unten ist die CSS-Klasse für ein bisschen Farbzweck.

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

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

Die ganze Idee dieser Logik besteht also darin, die Tabelle in einem Div für Tabellenhalter zu platzieren und beim Laden der Seite einen Klon dieses Halters auf der Clientseite zu erstellen. Verstecken Sie nun den Tischkörper im Klonhalter und positionieren Sie den verbleibenden Headerteil über dem ursprünglichen Header.

Dieselbe Lösung funktioniert auch für asp: gridview. Sie müssen zwei weitere Schritte hinzufügen, um dies in gridview zu erreichen.

  1. Setzen Sie im OnPrerender-Ereignis des Gridview-Objekts auf Ihrer Webseite den Tabellenabschnitt der Kopfzeile auf TableHeader.

    if (this.HeaderRow != null)
    {
        this.HeaderRow.TableSection = TableRowSection.TableHeader;
    }
  2. Und wickeln Sie Ihr Gitter in <div class="table-holder"></div>.

Hinweis : Wenn Ihr Header über anklickbare Steuerelemente verfügt, müssen Sie möglicherweise ein weiteres jQuery-Skript hinzufügen, um die im geklonten Header ausgelösten Ereignisse an den ursprünglichen Header zu übergeben. Dieser Code ist bereits im von jmosbech erstellten jQuery-Plugin für Sticky-Header verfügbar

pgcan
quelle
+1 für gute Mühe, aber für große Tabellen mit vielen Daten ist es ziemlich schlecht, das Ganze zu klonen ... Ich stelle mir vor, das würde die Ladezeit verdoppeln
khaverim
2

Die Verwendung display: fixeddes theadAbschnitts sollte funktionieren, aber nur für die aktuelle Tabelle in der Ansicht, benötigen Sie die Hilfe von JavaScript. Und es wird schwierig, weil es die Bildlaufpositionen und die Position von Elementen relativ zum Ansichtsfenster herausfinden muss, was einer der Hauptbereiche der Browser-Inkompatibilität ist.

Schauen Sie sich die gängigen JavaScript-Frameworks (jQuery, MooTools, YUI usw. usw.) an, um festzustellen, ob sie entweder das tun können, was Sie wollen, oder es einfacher machen, das zu tun, was Sie wollen.

staticsan
quelle
1
Danke für den Hinweis. Ich habe mit jQuery eine Lösung gefunden - siehe meine Antwort.
Craig McQueen
Ich habe es versucht und denke, Sie meinten eher Position als Anzeige, aber keiner von beiden arbeitete für Chead in Chome.
Ericlaw
@ericslaw Ack - ja ich meinte position: fixed. Entschuldigung, es hat in Chrome nicht funktioniert.
Statik
Ich habe meinen Header durcheinander gebracht, indem ich
Breitenstile
2

Wenn Sie eine Vollbildtabelle verwenden, möchten Sie möglicherweise Folgendes für die Anzeige einstellen: behoben; und oben: 0; oder versuchen Sie einen sehr ähnlichen Ansatz über CSS.

Aktualisieren

Erstellen Sie einfach schnell eine funktionierende Lösung mit iframes (html4.0). Dieses Beispiel ist NICHT standardkonform, Sie können es jedoch problemlos beheben:

Outer.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> 
Merkuro
quelle
@ a_m0d, stimmt ... aber die Anfrage klingt sehr verwirrend. Entweder verstehen wir es falsch oder der Fragesteller versteht nicht ganz, was er will.
Sampson
Hier ist eine andere Lösung mit etwas Javascript imaputz.com/cssStuff/bigFourVersion.html
merkuro
2

Die einfachste Antwort nur mit 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>

David Castro
quelle
1
Danke David, es ist der schönste Ansatz, den ich in dieser Frage gefunden habe
Tomasz Smykowski
0

Der von Ihnen erstellte Proof of Concept war großartig! Allerdings habe ich auch dieses jQuery-Plugin gefunden, das sehr gut zu funktionieren scheint. Ich hoffe es hilft!

Marco
quelle
Das sieht so aus, als würde es eine andere Funktion implementieren . Wie ich in meiner ursprünglichen Frage sagte: "Hinweis: Ich habe eine Lösung gesehen, bei der der Tabellendatenbereich scrollbar gemacht wird, während die Überschriften nicht scrollen. Das ist nicht die Lösung, nach der ich suche."
Craig McQueen
2
Das von Ihnen erwähnte Plugin hat gerade meinen Tabellenkopf durcheinander gebracht. Konnte es nicht benutzen.
pavel_kazlou
0

Es ist frustrierend, dass das, was in einem Browser gut funktioniert, in anderen nicht funktioniert. Folgendes funktioniert in Firefox, jedoch nicht in Chrome oder 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>
Peter Dow
quelle
4
Ich versuche es in Firefox 8.0 und es scheint nichts zu tun. Was tut es?
Craig McQueen
Was ist px? Ist es diese Legacy-Einheit, die von Menschen in den 90ern verwendet wurde, als ein Anzeigegerät mit 72 dpi verwendet wurde?
Ceving
Ich stimme zu: Es ist sehr frustrierend. Leider respektieren Browserentwickler nicht in jeder Situation Standards ... und vor einigen Jahren war es noch schlimmer! Jetzt wurden einige Probleme gelöst und mehr Browser verhalten sich standardisierter, aber es müssen noch viele Schritte getan werden: Hoffen wir und beten wir :-)
willy wonka