HTML-Tabelle mit festen Headern?

Ich habe gerade die Zusammenstellung eines jQuery-plugin, das gültig, eine einzelne Tabelle mit gültigen HTML-Code (haben ein thead und tbody) und ausgegeben wird eine Tabelle mit festen Header, optional Feste Fußzeile kann entweder ein geklontes header oder Inhalte, die Sie gewählt haben (die Paginierung, etc.). Wenn Sie möchten, um die Vorteile von größeren Monitoren wird es auch die Größe der Tabelle ändern, wenn der browser in der Größe geändert wird. Ein weiteres feature ist die Möglichkeit, auf die Seite scrollen, wenn die Tabelle Spalten können nicht alle passen in Sicht.

http://fixedheadertable.com/

auf github: http://markmalek.github.com/Fixed-Header-Table/

Es ist extrem einfach zu setup, und Sie können Ihre eigenen Formatvorlagen für Sie. Es nutzt auch abgerundete Ecken in allen Browsern. Halten Sie im Verstand, die ich gerade veröffentlicht, es ist also technisch noch beta und es gibt nur sehr wenige kleinere Probleme, ich bin ausbügeln.

Es funktioniert in Internet Explorer 7, Internet Explorer 8, Safari, Firefox und Chrome.

InformationsquelleAutor der Antwort Mark

Ich habe auch ein plugin, das dieses Problem behebt. Mein Projekt - jQuery.floatThead hat schon seit über einem Jahr jetzt, und ist sehr ausgereift.

Es erfordert keine externen styles und erwartet nicht, dass Ihr Tisch gestylt werden, die in einer bestimmten Art und Weise. Es unterstützt IE8+ und FF/Chrome.

Derzeit (5/2018) es hat:

405 begeht und 998 Sterne auf github

Viele (nicht alle) der Antworten hier sind schnelle hacks, kann das problem gelöst haben, eine person hatte aber funktioniert nicht für jede Tabelle.

Einige der anderen plugins sind alt und wahrscheinlich Super funktionieren mit dem IE, aber brechen auf FF und chrome.

InformationsquelleAutor der Antwort mkoryak

Hier ist ein jQuery-plugin für Feste Tabellen-Kopfzeile. Es erlaubt, die gesamte Seite zu scrollen, das einfrieren der header, wenn es die Spitze erreicht. Es funktioniert auch mit twitter bootstrap-Tabellen.

Github repo: https://github.com/oma/table-fixed-header

Tut es nicht Blättern nur die Tabelle Inhalte. Schauen Sie zu anderen tools, für, dass, als einer der anderen Antworten. Sie entscheiden, was passt Ihrem Fall die beste ist.

InformationsquelleAutor der Antwort oma

Ein einfaches jQuery-plugin

Dies ist eine variation Mahes' Lösung. Sie können es nennen, wie $('table#foo').scrollableTable();

Die Idee ist:

• Teilen Sie die thead und tbody in separate table Elemente
• Ihre Zelle breiten übereinstimmung wieder
• Wickeln Sie die zweite table im div.scrollable
• CSS verwenden, um div.scrollable eigentlich scrollen

CSS könnte:

div.scrollable { height: 300px; overflow-y: scroll;}

Vorsichtsmaßnahmen

• Offensichtlich, Aufspaltung diese Tabellen macht das markup weniger semantische. Ich bin mir nicht sicher, was für eine Wirkung hat dies auf die Barrierefreiheit.
• Dieses plugin macht nicht deal mit Fußzeilen, mehrere Header, etc.
• Nur habe ich es getestet in Chrome, version 20.

Das heißt, es funktioniert für meine Zwecke und du bist frei, zu nehmen und es ändern.

Hier ist das plugin:

jQuery.fn.scrollableTable = function () {
  var $newTable, $oldTable, $scrollableDiv, originalWidths;
  $oldTable = $(this);

  //Once the tables are split, their cell widths may change. 
  //Grab these so we can make the two tables match again.
  originalWidths = $oldTable.find('tr:first td').map(function() {
    return $(this).width();
  });

  $newTable = $oldTable.clone();
  $oldTable.find('tbody').remove();
  $newTable.find('thead').remove();

  $.each([$oldTable, $newTable], function(index, $table) {
    $table.find('tr:first td').each(function(i) {
      $(this).width(originalWidths[i]);
    });
  });

  $scrollableDiv = $('<div/>').addClass('scrollable');
  $newTable.insertAfter($oldTable).wrap($scrollableDiv);
};

InformationsquelleAutor der Antwort Nathan Long

Unterstützung für Feste Fußzeile

Ich streckte Nathan die Funktion auch unterstützen einen festen footer und max-height.
Auch die Funktion setzt die css selbst, Sie haben nur zu unterstützen, eine Breite.

Verwendung:

Feste Höhe:

$('table').scrollableTable({ height: 100 });

Max Höhe (wenn der browser unterstützt die css 'max-height' - option):

$('table').scrollableTable({ maxHeight: 100 });

Skript:

jQuery.fn.scrollableTable = function(options) {

    var $originalTable, $headTable, $bodyTable, $footTable, $scrollableDiv, originalWidths;

    //prepare the separate parts of the table
    $originalTable = $(this);
    $headTable = $originalTable.clone();

    $headTable.find('tbody').remove();
    $headTable.find('tfoot').remove();

    $bodyTable = $originalTable.clone();
    $bodyTable.find('thead').remove();
    $bodyTable.find('tfoot').remove();

    $footTable = $originalTable.clone();
    $footTable.find('thead').remove();
    $footTable.find('tbody').remove();

    //grap original column widths and set them in the separate tables
    originalWidths = $originalTable.find('tr:first td').map(function() {
        return $(this).width();
    });

    $.each([$headTable, $bodyTable, $footTable], function(index, $table) {
        $table.find('tr:first td').each(function(i) {
            $(this).width(originalWidths[i]);
        });
    });

    //the div that makes the body table scroll
    $scrollableDiv = $('<div/>').css({
        'overflow-y': 'scroll'
    });

    if(options.height) {
        $scrollableDiv.css({'height': options.height});
    }
    else if(options.maxHeight) {
        $scrollableDiv.css({'max-height': options.maxHeight});
    }

    //add the new separate tables and remove the original one
    $headTable.insertAfter($originalTable);
    $bodyTable.insertAfter($headTable);
    $footTable.insertAfter($bodyTable);
    $bodyTable.wrap($scrollableDiv);
    $originalTable.remove();

};

InformationsquelleAutor der Antwort rednaw

Merke ich, die Frage erlaubt JavaScript, aber hier ist eine Reine CSS-Lösung, die ich erarbeitet, dass auch die Möglichkeit für die Tabelle horizontal erweitert. Getestet mit IE10 und neuesten Chrome-und Firefox-Browser. Ein link zu jsFiddle ist an der Unterseite.

HTML:

Putting some text here to differentiate between the header aligning with the top of the screen and the header aligning with the top of one of it's ancestor containers.
<div id="positioning-container">
<div id="scroll-container">
    <table>
        <colgroup>
            <col class="col1"></col>
            <col class="col2"></col>
        </colgroup>
        <thead>
            <th class="header-col1"><div>Header 1</div></th>
            <th class="header-col2"><div>Header 2</div></th>
        </thead>
        <tbody>
            <tr><td>Cell 1.1</td><td>Cell 1.2</td></tr>
            <tr><td>Cell 2.1</td><td>Cell 2.2</td></tr>
            <tr><td>Cell 3.1</td><td>Cell 3.2</td></tr>
            <tr><td>Cell 4.1</td><td>Cell 4.2</td></tr>
            <tr><td>Cell 5.1</td><td>Cell 5.2</td></tr>
            <tr><td>Cell 6.1</td><td>Cell 6.2</td></tr>
            <tr><td>Cell 7.1</td><td>Cell 7.2</td></tr>

        </tbody>
    </table>
</div>
</div>

Und CSS:

table{
    border-collapse: collapse;
    table-layout: fixed;
    width: 100%;
}
/* Not required, just helps with alignment for this example */
td, th{
    padding: 0;
    margin: 0;
}

tbody{
    background-color: #ddf;
}

thead {
    /* Keeps the header in place. Don't forget top: 0 */
    position: absolute;
    top: 0;
    background-color: #ddd;
    /* The 17px is to adjust for the scrollbar width.
     * This is a new css value that makes this pure
     * css example possible */
    width: calc(100% - 17px);
    height: 20px;
}
/* Positioning container. Required to position the
 * header since the header uses position:absolute
 * (otherwise it would position at the top of the screen) */
#positioning-container{
    position: relative;
}
/* A container to set the scroll-bar and 
 * includes padding to move the table contents
 * down below the header (padding = header height) */
#scroll-container{
    overflow-y: auto;
    padding-top: 20px;
    height: 100px;
}
.header-col1{
    background-color: red;
}
/* fixed width header columns need a div to set their width */
.header-col1 div{
    width: 100px;
}
/* expandable columns need a width set on the th tag */
.header-col2{
    width: 100%;
}
.col1 {
    width: 100px;
}
.col2{
    width: 100%;
}

http://jsfiddle.net/HNHRv/3/

InformationsquelleAutor der Antwort bzuillsmith

Dies ist nicht eine exakte Lösung für die Feste header-Zeile, aber habe ich eine ziemlich geniale Methode der Wiederholung der Kopfzeile, in der langen Tabelle doch immer noch die Möglichkeit zu Sortieren. Dieses nette kleine option erfordert die jQuery tablesorter plugin. Hier ist, wie es funktioniert:

html

<table class="tablesorter boxlist" id="pmtable">
<thead class="fixedheader">
        <tr class="boxheadrow">
    <th width="70px" class="header">Job Number</th>
    <th width="10px" class="header">Pri</th>
    <th width="70px" class="header">CLLI</th>
    <th width="35px" class="header">Market</th>
    <th width="35px" class="header">Job Status</th>
    <th width="65px" class="header">Technology</th>
    <th width="95px;" class="header headerSortDown">MEI</th>
    <th width="95px" class="header">TEO Writer</th>
    <th width="75px" class="header">Quote Due</th>
    <th width="100px" class="header">Engineer</th>
    <th width="75px" class="header">ML Due</th>
    <th width="75px" class="header">ML Complete</th>
    <th width="75px" class="header">SPEC Due</th>
    <th width="75px" class="header">SPEC Complete</th>
    <th width="100px" class="header">Install Supervisor</th>
    <th width="75px" class="header">MasTec OJD</th>
    <th width="75px" class="header">Install Start</th>
    <th width="30px" class="header">Install Hours</th>
    <th width="75px" class="header">Revised CRCD</th>
    <th width="75px" class="header">Latest Ship-To-Site</th>
    <th width="30px" class="header">Total Parts</th>
    <th width="30px" class="header">OEM Rcvd</th>
    <th width="30px" class="header">Minor Rcvd</th>
    <th width="30px" class="header">Total Received</th>
    <th width="30px" class="header">% On Site</th>
    <th width="60px" class="header">Actions</th>
    </tr>
</thead>
<tbody class="scrollable">
        <tr data-job_id="3548" data-ml_id="" class="odd">
            <td class="c black">FL-8-RG9UP</td>
            <td data-pri="2" class="priority c yellow">M</td>
            <td class="c">FTLDFLOV</td>
            <td class="c">SFL</td>
            <td class="c">NOI</td>
            <td class="c">TRANSPORT</td>
            <td class="c"></td>
            <td class="c">Chris Byrd</td>
            <td class="c">Apr 13, 2013</td>
            <td class="c">Kris Hall</td>
            <td class="c">May 20, 2013</td>
            <td class="c">May 20, 2013</td>
            <td class="c">Jun 5, 2013</td>
            <td class="c">Jun 7, 2013</td>
            <td class="c">Joseph Fitz</td>
            <td class="c">Jun 10, 2013</td>
            <td class="c">TBD</td>
            <td class="c">123</td>
            <td class="c revised_crcd"><input readonly="true" name="revised_crcd" value="Jul 26, 2013" type="text" size="12" class="smInput r_crcd c hasDatepicker" id="dp1377194058616"></td>
            <td class="c">TBD</td>
            <td class="c">N/A</td>
            <td class="c">N/A</td>
            <td class="c">N/A</td>
            <td class="c">N/A</td>
            <td class="c">N/A</td>
            <td class="actions"><span style="float:left;" class="ui-icon ui-icon-folder-open editJob" title="View this job" s="" details'=""></span></td>
        </tr>
        <tr data-job_id="4264" data-ml_id="2959" class="even">
            <td class="c black">MTS13009SF</td>
            <td data-pri="2" class="priority c yellow">M</td>
            <td class="c">OJUSFLTL</td>
            <td class="c">SFL</td>
            <td class="c">NOI</td>
            <td class="c">TRANSPORT</td>
            <td class="c"></td>
            <td class="c">DeMarcus Stewart</td>
            <td class="c">May 22, 2013</td>
            <td class="c">Ryan Alsobrook</td>
            <td class="c">Jun 19, 2013</td>
            <td class="c">Jun 27, 2013</td>
            <td class="c">Jun 19, 2013</td>
            <td class="c">Jul 4, 2013</td>
            <td class="c">Randy Williams</td>
            <td class="c">Jun 21, 2013</td>
            <td class="c">TBD</td>
            <td class="c">95</td>
            <td class="c revised_crcd"><input readonly="true" name="revised_crcd" value="Aug 9, 2013" type="text" size="12" class="smInput r_crcd c hasDatepicker" id="dp1377194058632"></td><td class="c">TBD</td>
            <td class="c">0</td>
            <td class="c">0.00%</td>
            <td class="c">0.00%</td>
            <td class="c">0.00%</td>
            <td class="c">0.00%</td>
            <td class="actions"><span style="float:left;" class="ui-icon ui-icon-folder-open editJob" title="View this job" s="" details'=""></span><input style="float:left;" type="hidden" name="req_ship" class="reqShip hasDatepicker" id="dp1377194058464"><span style="float:left;" class="ui-icon ui-icon-calendar requestShip" title="Schedule this job for shipping"></span><span class="ui-icon ui-icon-info viewOrderInfo" style="float:left;" title="Show material details for this order"></span></td>
        </tr>
        .
        .
        .
        .
        <tr class="boxheadrow repeated-header">
        <th width="70px" class="header">Job Number</th>
    <th width="10px" class="header">Pri</th>
    <th width="70px" class="header">CLLI</th>
    <th width="35px" class="header">Market</th>
    <th width="35px" class="header">Job Status</th>
    <th width="65px" class="header">Technology</th>
    <th width="95px;" class="header">MEI</th>
    <th width="95px" class="header">TEO Writer</th>
    <th width="75px" class="header">Quote Due</th>
    <th width="100px" class="header">Engineer</th>
    <th width="75px" class="header">ML Due</th>
    <th width="75px" class="header">ML Complete</th>
    <th width="75px" class="header">SPEC Due</th>
    <th width="75px" class="header">SPEC Complete</th>
    <th width="100px" class="header">Install Supervisor</th>
    <th width="75px" class="header">MasTec OJD</th>
    <th width="75px" class="header">Install Start</th>
    <th width="30px" class="header">Install Hours</th>
    <th width="75px" class="header">Revised CRCD</th>
    <th width="75px" class="header">Latest Ship-To-Site</th>
    <th width="30px" class="header">Total Parts</th>
    <th width="30px" class="header">OEM Rcvd</th>
    <th width="30px" class="header">Minor Rcvd</th>
    <th width="30px" class="header">Total Received</th>
    <th width="30px" class="header">% On Site</th>
    <th width="60px" class="header">Actions</th>
    </tr>

Obvioiusly, meine Tabelle hat viel mehr Zeilen als diese. 193 um genau zu sein, eine Mutter, die Sie sehen können, wo die header-Zeile wiederholt. Die sich wiederholende Kopfzeile setup diese Funktion:

jQuery

    //clone the original header row and add the "repeated-header" class
var tblHeader = $('tr.boxheadrow').clone().addClass('repeated-header');
    //add the cloned header with the new class every 34th row (or as you see fit)
$('tbody tr:odd:nth-of-type(17n)').after(tblHeader);
    //on the 'sortStart' routine, remove all the inserted header rows
$('#pmtable').bind('sortStart', function() {
    $('.repeated-header').remove();
    //on the 'sortEnd' routine, add back all the header row lines.
}).bind('sortEnd', function() {
    $('tbody tr:odd:nth-of-type(17n)').after(tblHeader);
});

InformationsquelleAutor der Antwort DevlshOne

Ich entwickelte eine einfache, geringes Gewicht jQuery-plug-in für die Konvertierung einer gut HTML-Tabelle, um eine scrollbare Tabelle mit festen header-Tabelle und Spalten.

Das plugin funktioniert gut übereinstimmen pixel-zu-pixel-Positionierung der Feste Abschnitt mit den scrollbaren Bereich. Zusätzlich, Sie könnte auch gefrieren und Anzahl der Spalten werden immer in der Ansicht beim scrollen horizontal.

Demo & Dokumentation: http://meetselva.github.io/fixed-table-rows-cols/

Github Repo: https://github.com/meetselva/fixed-table-rows-cols

Unten ist die Nutzung für eine einfache Tabelle mit festen header,

$(<table selector>).fxdHdrCol({
    width:     "100%",
    height:    200,
    colModal: [{width: 30, align: 'center'},
               {width: 70, align: 'center'}, 
               {width: 200, align: 'left'}, 
               {width: 100, align: 'center'}, 
               {width: 70, align: 'center'}, 
               {width: 250, align: 'center'}
              ]
});

InformationsquelleAutor der Antwort Selvakumar Arumugam

Hier ist eine Lösung, landeten wir arbeiten mit (um einige Grenzfälle und älteren IE-Versionen, die wir letztlich auch verblasst der Titelleiste auf Blättern, dann verblassen es zurück, wenn das scrollen beendet, aber in Firefox und Webkit-Browser diese Lösung funktioniert einfach. Es wird davon ausgegangen border-collapse: collapse.

Den Schlüssel zu dieser Lösung ist, dass, sobald Sie border-collapseCSS-Transformationen Arbeit auf die header, es ist also nur eine Frage der scroll-Ereignisse abfangen und Einstellung die Transformation korrekt. Sie nicht brauchen, um doppelte alles. Kurz, dieses Verhalten ordnungsgemäß umgesetzt wird, in den browser, es ist schwer vorstellbar, eine mehr Licht-Gewicht-Lösung.

JSFiddle: http://jsfiddle.net/podperson/tH9VU/2/

Es ist implementiert als eine einfache jQuery-plugin. Sie machen einfach Ihre thead ' s sticky mit einem Aufruf wie $('thead').sticky() und Sie hängen herum. Arbeitet für mehrere Tabellen auf einer Seite und Kopf Abschnitten auf halbem Weg nach unten den großen Tabellen.

        $.fn.sticky = function(){
        $(this).each( function(){
            var thead = $(this),
                tbody = thead.next('tbody');

            updateHeaderPosition();

            function updateHeaderPosition(){
                if( 
                    thead.offset().top < $(document).scrollTop()
                    && tbody.offset().top + tbody.height() > $(document).scrollTop()
                ){
                    var tr = tbody.find('tr').last(),
                        y = tr.offset().top - thead.height() < $(document).scrollTop()
                            ? tr.offset().top - thead.height() - thead.offset().top
                            : $(document).scrollTop() - thead.offset().top;

                    thead.find('th').css({
                        'z-index': 100,
                        'transform': 'translateY(' + y + 'px)',
                        '-webkit-transform': 'translateY(' + y + 'px)'
                    });
                } else {
                    thead.find('th').css({
                        'transform': 'none',
                        '-webkit-transform': 'none'
                    });
                }
            }

            //see http://www.quirksmode.org/dom/events/scroll.html
            $(window).on('scroll', updateHeaderPosition);
        });
    }

    $('thead').sticky();

InformationsquelleAutor der Antwort podperson

Ich mag Maximillian Hils' Antwort, aber ich hatte einige Probleme:

1. die Transformation funktioniert nicht Edge oder IE, es sei denn, Sie wenden es an der th
2. der header flackert beim scrollen in Rand-und IE -
3. meine Tabelle ist geladen mit ajax, also wollte ich anfügen, um das Fenster scroll-Ereignis eher als der wrapper das scroll-Ereignis

Um loszuwerden, das flackern, benutze ich einen timeout zu warten, bis der Benutzer beendet scrolling, dann habe ich mit dem transformieren - so ist der header nicht sichtbar beim scrollen.

Habe ich auch geschrieben, das mithilfe von jQuery, ein Vorteil ist, dass jQuery behandeln soll, die vendor-Präfixe für Sie

    var isScrolling, lastTop, lastLeft, isLeftHidden, isTopHidden;

    //Scroll events don't bubble https://stackoverflow.com/a/19375645/150342
    //so can't use $(document).on("scroll", ".table-container-fixed", function (e) {
    document.addEventListener('scroll', function (event) {
        var $container = $(event.target);
        if (!$container.hasClass("table-container-fixed"))
            return;    

        //transform needs to be applied to th for Edge and IE
        //in this example I am also fixing the leftmost column
        var $topLeftCell = $container.find('table:first > thead > tr > th:first');
        var $headerCells = $topLeftCell.siblings();
        var $columnCells = $container
           .find('table:first > tbody > tr > td:first-child, ' +
                 'table:first > tfoot > tr > td:first-child');

        //hide the cells while returning otherwise they show on top of the data
        if (!isLeftHidden) {
            var currentLeft = $container.scrollLeft();
            if (currentLeft < lastLeft) {
                //scrolling left
                isLeftHidden = true;
                $topLeftCell.css('visibility', 'hidden');
                $columnCells.css('visibility', 'hidden');
            }
            lastLeft = currentLeft;
        }

        if (!isTopHidden) {
            var currentTop = $container.scrollTop();
            if (currentTop < lastTop) {
                //scrolling up
                isTopHidden = true;
                $topLeftCell.css('visibility', 'hidden');
                $headerCells.css('visibility', 'hidden');
            }
            lastTop = currentTop;
        }

        //Using timeout to delay transform until user stops scrolling
        //Clear timeout while scrolling
        window.clearTimeout(isScrolling);

        //Set a timeout to run after scrolling ends
        isScrolling = setTimeout(function () {
            //move the table cells. 
            var x = $container.scrollLeft();
            var y = $container.scrollTop();

            $topLeftCell.css('transform', 'translate(' + x + 'px, ' + y + 'px)');
            $headerCells.css('transform', 'translateY(' + y + 'px)');
            $columnCells.css('transform', 'translateX(' + x + 'px)');

            isTopHidden = isLeftHidden = false;
            $topLeftCell.css('visibility', 'inherit');
            $headerCells.css('visibility', 'inherit');
            $columnCells.css('visibility', 'inherit');
        }, 100);

    }, true);

Dem Tisch, eingewickelt in ein div mit der Klasse table-container-fixed.

.table-container-fixed{
    overflow: auto;
    height: 400px;
}

Setze ich border-collapse zu trennen, weil wir sonst verlieren Grenzen während der übersetzung, und ich entfernen Sie den Rahmen auf den Tisch zu stoppen Inhalte, die nur über der Zelle, wo die Grenze war während des Blätterns.

.table-container-fixed > table {
   border-collapse: separate;
   border:none;
}

Ich die th hintergrund weiß, zur Abdeckung der darunter liegenden Zellen, und ich fügen Sie eine Grenze, die mit der Tabelle übereinstimmt Grenze - die ist gestaltet mit Bootstrap und gescrollt angezeigt.

 .table-container-fixed > table > thead > tr > th {
        border-top: 1px solid #ddd !important;
        background-color: white;        
        z-index: 10;
        position: relative;/*to make z-index work*/
    }

            .table-container-fixed > table > thead > tr > th:first-child {
                z-index: 20;
            }

.table-container-fixed > table > tbody > tr > td:first-child,
.table-container-fixed > table > tfoot > tr > td:first-child {
    background-color: white;        
    z-index: 10;
    position: relative;
}

InformationsquelleAutor der Antwort Colin