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

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.

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

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

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.

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

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

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

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.

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> 

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>

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!

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>